I am using Jqueryui drag resize select all together drag and resize is working fine but select is not working fine . JSFiddle

My code is:-

CSS-

 .dr {
    background: none repeat scroll 0 0 #63F;
    color: #7B7B7B;
    height: 50px;

    text-shadow: 1px 1px 2px #FFFFFF;
    width: 50px;
    position:absolute;
    }
.bg_section {
    border: 1px solid #E4E3E3;
    height: 290px;
    margin: 48px auto 0;
    position: relative;
    width: 400px;
}

JS-

$(document).ready(function(){
         var selected = $([]), offset = {top:0, left:0}; 
         $( "#dialog-form" ).dialog({
          autoOpen: false,
         height: 300,
         width: 350,
         modal: true,
         buttons: {
         "Add": function() {
            section = $( "#section" ).val();
            divid = $( "#divdata" ).val();
            divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
           // $( ".add" ).appendTo( $( "#"+section) );
            $( divstring ).appendTo( $( "."+section) );
            $( "."+section).selectable();
            $("#divdata option[value="+ divid+"]").remove();
            $("#"+divid).draggable({
                 containment: "."+section,
                 grid: [ 10, 10 ],
                  start: function(ev, ui) {
                    if ($(this).hasClass("ui-selected")){
                        selected = $(".ui-selected").each(function() {
                           var el = $(this);
                           el.data("offset", el.offset());
                        });
                    }
                    else {
                        selected = $([]);
                        $(".dr").removeClass("ui-selected");
                    }
                    offset = $(this).offset();
                },
                drag: function(ev, ui) {
                    var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
                    // take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
                    selected.not(this).each(function() {
                         // create the variable for we don't need to keep calling $("this")
                         // el = current element we are on
                         // off = what position was this element at when it was selected, before drag
                         var el = $(this), off = el.data("offset");
                        el.css({top: off.top + dt, left: off.left + dl});
                    });
                },
                stop: function(e, ui) {  
                     var Stoppos = $(this).position();
                     var leftPos=Stoppos.left;
                     var topPos= Stoppos.top;
                     var dragId=ui.helper[0].id;
                    // alert(leftPos/10);
                    // alert(topPos/10);
                     // alert(dragId);
                    sectionWidth= $('#'+dragId).parent().width();
                    sectionHeight = $('#'+dragId).parent().height();
                 },
          }).resizable({
             containment: "."+section,
             grid: [10,10],
             start: function(e, ui) {
                 // alert($(".paper-area").width());
                //containment: ".paper-area",
                $(this).css({
                //  position: "absolute",
                 });
            },
            stop: function(e, ui) {
                 // containment: ".paper-area",
                $(this).css({
                //   position: "absolute",
                });
            }
        });


      },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {

      }
    });

$( "body" ).on( "click", ".dr", function(e) {   


    if (e.metaKey == false) {

        // if mand key is pressed don't deselect existing elements
        $( ".dr" ).removeClass("ui-selected");
        $(this).addClass("ui-selecting");
    }
    else {


        if ($(this).hasClass("ui-selected")) {
            // remove selected class from element if already selected
            $(this).removeClass("ui-selected");
        }
        else {
            // add selecting class if not
            $(this).addClass("ui-selecting");
        }
    }

    $( ".bg_section" ).data(".bg_section")._mouseStop(null);
});


$(".add").click(function() {
     $( "#dialog-form" ).dialog( "open" );
     $("#new_field").hide();
     $("#save_new").hide();
});


$(".add_new").click(function() {
    $(".add_new").hide();
    $("#new_field").show();
    $("#save_new").show();

});

$("#save_new").click(function() {

    $( "#divdata" ).append($('<option>', {
    value: $("#new_field").val(),
    text:  $("#new_field").val(),
    class:'add',
    }));

    $("#new_field").hide();
    $("#save_new").hide();
    $(".add_new").show();

});
}) 

HTML-

 <div id="dialog-form" title="Add fields in Section">
  <p class="validateTips">All form fields are required.</p>
   <div class="add_new">Add</div>
   <input type="text" id="new_field"/>
   <div id="save_new">save</div> 
  <form>
  <fieldset>
  <label for="divdata">Divs</label>
  <select name="divdata" id="divdata">

    <option value="dr1">Div1</option>
    <option value="dr2">Div2</option>
    <option value="dr3">Div3</option>
    <option value="dr4">Div4</option>
    <option value="dr5">Div5</option>

  </select>

      </br>

  <label for="section">Section</label>
<select name="section" id="section">
    <option value="paper-area">Header</option>
    <option value="paper-area-detail">Detail</option>
    <option value="paper-area-qty">Items</option>
    <option value="paper-area-sub">Total</option>
    <option value="paper-area-footer">Footer</option>
</select>

  </fieldset>
  </form>
</div>

<div class="main_bg">



<div class="textarea-top">

<div class="textarea-field">
<div class="field-icon add"><a href="#"><img src="<?php echo Yii::app()->baseUrl;?>/images/bill_add-field-icon.png" alt="add" border="0" width="29" height="25" /></a></div>

</div>


<div class="paper-area bg_section" id="paper_area">


</div>


<div class="paper-area-detail bg_section">



</div>

<div class="paper-area-qty bg_section">

</div>

<div class="paper-area-sub bg_section">

</div>

<div class="paper-area-footer bg_section"></div>

</div>

I am using drag-select for drag resize.Any help should be Appreciated.

I am using Jqueryui drag resize select all together drag and resize is working fine but select is not working fine . JSFiddle

My code is:-

CSS-

 .dr {
    background: none repeat scroll 0 0 #63F;
    color: #7B7B7B;
    height: 50px;

    text-shadow: 1px 1px 2px #FFFFFF;
    width: 50px;
    position:absolute;
    }
.bg_section {
    border: 1px solid #E4E3E3;
    height: 290px;
    margin: 48px auto 0;
    position: relative;
    width: 400px;
}

JS-

$(document).ready(function(){
         var selected = $([]), offset = {top:0, left:0}; 
         $( "#dialog-form" ).dialog({
          autoOpen: false,
         height: 300,
         width: 350,
         modal: true,
         buttons: {
         "Add": function() {
            section = $( "#section" ).val();
            divid = $( "#divdata" ).val();
            divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
           // $( ".add" ).appendTo( $( "#"+section) );
            $( divstring ).appendTo( $( "."+section) );
            $( "."+section).selectable();
            $("#divdata option[value="+ divid+"]").remove();
            $("#"+divid).draggable({
                 containment: "."+section,
                 grid: [ 10, 10 ],
                  start: function(ev, ui) {
                    if ($(this).hasClass("ui-selected")){
                        selected = $(".ui-selected").each(function() {
                           var el = $(this);
                           el.data("offset", el.offset());
                        });
                    }
                    else {
                        selected = $([]);
                        $(".dr").removeClass("ui-selected");
                    }
                    offset = $(this).offset();
                },
                drag: function(ev, ui) {
                    var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
                    // take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
                    selected.not(this).each(function() {
                         // create the variable for we don't need to keep calling $("this")
                         // el = current element we are on
                         // off = what position was this element at when it was selected, before drag
                         var el = $(this), off = el.data("offset");
                        el.css({top: off.top + dt, left: off.left + dl});
                    });
                },
                stop: function(e, ui) {  
                     var Stoppos = $(this).position();
                     var leftPos=Stoppos.left;
                     var topPos= Stoppos.top;
                     var dragId=ui.helper[0].id;
                    // alert(leftPos/10);
                    // alert(topPos/10);
                     // alert(dragId);
                    sectionWidth= $('#'+dragId).parent().width();
                    sectionHeight = $('#'+dragId).parent().height();
                 },
          }).resizable({
             containment: "."+section,
             grid: [10,10],
             start: function(e, ui) {
                 // alert($(".paper-area").width());
                //containment: ".paper-area",
                $(this).css({
                //  position: "absolute",
                 });
            },
            stop: function(e, ui) {
                 // containment: ".paper-area",
                $(this).css({
                //   position: "absolute",
                });
            }
        });


      },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {

      }
    });

$( "body" ).on( "click", ".dr", function(e) {   


    if (e.metaKey == false) {

        // if mand key is pressed don't deselect existing elements
        $( ".dr" ).removeClass("ui-selected");
        $(this).addClass("ui-selecting");
    }
    else {


        if ($(this).hasClass("ui-selected")) {
            // remove selected class from element if already selected
            $(this).removeClass("ui-selected");
        }
        else {
            // add selecting class if not
            $(this).addClass("ui-selecting");
        }
    }

    $( ".bg_section" ).data(".bg_section")._mouseStop(null);
});


$(".add").click(function() {
     $( "#dialog-form" ).dialog( "open" );
     $("#new_field").hide();
     $("#save_new").hide();
});


$(".add_new").click(function() {
    $(".add_new").hide();
    $("#new_field").show();
    $("#save_new").show();

});

$("#save_new").click(function() {

    $( "#divdata" ).append($('<option>', {
    value: $("#new_field").val(),
    text:  $("#new_field").val(),
    class:'add',
    }));

    $("#new_field").hide();
    $("#save_new").hide();
    $(".add_new").show();

});
}) 

HTML-

 <div id="dialog-form" title="Add fields in Section">
  <p class="validateTips">All form fields are required.</p>
   <div class="add_new">Add</div>
   <input type="text" id="new_field"/>
   <div id="save_new">save</div> 
  <form>
  <fieldset>
  <label for="divdata">Divs</label>
  <select name="divdata" id="divdata">

    <option value="dr1">Div1</option>
    <option value="dr2">Div2</option>
    <option value="dr3">Div3</option>
    <option value="dr4">Div4</option>
    <option value="dr5">Div5</option>

  </select>

      </br>

  <label for="section">Section</label>
<select name="section" id="section">
    <option value="paper-area">Header</option>
    <option value="paper-area-detail">Detail</option>
    <option value="paper-area-qty">Items</option>
    <option value="paper-area-sub">Total</option>
    <option value="paper-area-footer">Footer</option>
</select>

  </fieldset>
  </form>
</div>

<div class="main_bg">



<div class="textarea-top">

<div class="textarea-field">
<div class="field-icon add"><a href="#"><img src="<?php echo Yii::app()->baseUrl;?>/images/bill_add-field-icon.png" alt="add" border="0" width="29" height="25" /></a></div>

</div>


<div class="paper-area bg_section" id="paper_area">


</div>


<div class="paper-area-detail bg_section">



</div>

<div class="paper-area-qty bg_section">

</div>

<div class="paper-area-sub bg_section">

</div>

<div class="paper-area-footer bg_section"></div>

</div>

I am using drag-select for drag resize.Any help should be Appreciated.

• javascript
• jquery
• html
• css
• jquery-ui

• 1 What are to trying to do exactly? – apaul Commented Nov 11, 2013 at 17:33
• @apaul34208 I am trying to select div using jquery select so that I can remove them or change there css. – Prince Commented Nov 12, 2013 at 5:41
• can you explain in detail – Sarath Babu Nuthimadugu Commented Nov 12, 2013 at 10:24
• @sarath I want to select div using jquery selectable so that I can change style of only selected items(div) or can remove selected divs.I have to store style details in database so I can change style of the selected items. – Prince Commented Nov 12, 2013 at 10:51
• I found an off topic problem with your script. If you add all the divs possible to lets say the header section and then add another one you get a null div. You can't select the div drop-down but it will still add a div regardless. – Josh Powell Commented Nov 13, 2013 at 19:07

4 Answers 4

Seems like a strange bug/conflict with jquery ui dragable and/or resizeable. Only some parts of selectable are working in bination with these other two functions. If you inspect the elements which have all three functions and you try to select one of them it only gets the "ui-selecting" class, which is a timeout class and option from selectable but stoping there. Normally the classes are replaced in this way:

1. ui-selectee
2. ui-selecting
3. ui-selected.

If you remove the drag- and resizeable functions the selectable stuff is working normally (but there still other bugs in your code)

I guess it is possible to bine all these function, but you will have to play around with the options and callbacks to get it working like you want to. Maybe not everything you want is possible becouse of these conflicts.

The easiest way to resize is by using resize:both; , max-height:__px; , max-width:__px; in CSS

Indeed it seems that jquery ui draggable and selectable don't work that nice together. However other people have posted solutions. Please look at the following,

http://words.transmote./wp/20130714/jqueryui-draggable-selectable/ http://jsfiddle/6f9zW/light/ (this is from the article above)

Since it seems as a nice working solution that examines the state when dragging and selecting, i will also post it below in case the site goes down.

JS

// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0}; 

$( "#selectable > div" ).draggable({
    start: function(ev, ui) {
        if ($(this).hasClass("ui-selected")){
            selected = $(".ui-selected").each(function() {
               var el = $(this);
               el.data("offset", el.offset());
            });
        }
        else {
            selected = $([]);
            $("#selectable > div").removeClass("ui-selected");
        }
        offset = $(this).offset();
    },
    drag: function(ev, ui) {
        var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
        // take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
        selected.not(this).each(function() {
             // create the variable for we don't need to keep calling $("this")
             // el = current element we are on
             // off = what position was this element at when it was selected, before drag
             var el = $(this), off = el.data("offset");
            el.css({top: off.top + dt, left: off.left + dl});
        });
    }
});

$( "#selectable" ).selectable();

// manually trigger the "select" of clicked elements
$( "#selectable > div" ).click( function(e){
    if (e.metaKey == false) {
        // if mand key is pressed don't deselect existing elements
        $( "#selectable > div" ).removeClass("ui-selected");
        $(this).addClass("ui-selecting");
    }
    else {
        if ($(this).hasClass("ui-selected")) {
            // remove selected class from element if already selected
            $(this).removeClass("ui-selected");
        }
        else {
            // add selecting class if not
            $(this).addClass("ui-selecting");
        }
    }

    $( "#selectable" ).data("selectable")._mouseStop(null);
});

// starting position of the divs
var i = 0;
$("#selectable > div").each( function() {
    $(this).css({
        top: i * 42 
    });
    i++;
});

CSS

#selectable .ui-selecting {background: #FECA40;}
#selectable .ui-selected {background: #F39814; color: white;}
#selectable {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
#selectable > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}

HTML

<div id="selectable">
  <div class="ui-widget-content">Item 1</div>
  <div class="ui-widget-content">Item 2</div>
  <div class="ui-widget-content">Item 3</div>
  <div class="ui-widget-content">Item 4</div>
  <div class="ui-widget-content">Item 5</div>
</div>

Other threads describing similar problem and solutions,

Is there a JQuery plugin which bines Draggable and Selectable

jQuery UI : Combining Selectable with Draggable

I have found A solution Now we can use *Drag-Resize-Select -*together

Example- code:-

CSS:-

.ui-selecting {background: #FECA40;}
.ui-selected {background: #F39814; color: white;}
.bg_section {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
.bg_section > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}

JS:-

var selected = $([]);   // list of selected objects
var lastselected = '';  // for the shift-click event


$(document).ready(function(){

         $( "#dialog-form" ).dialog({
          autoOpen: false,
         height: 300,
         width: 350,
         modal: true,
         buttons: {
         "Add": function() {
            section = $( "#section" ).val();
            divid = $( "#divdata" ).val();
            divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
           // $( ".add" ).appendTo( $( "#"+section) );
            $( divstring ).appendTo( $( "."+section) );
            $("#divdata option[value="+ divid+"]").remove();
            $("#"+divid).draggable({
                 containment: "."+section,
                 grid: [ 10, 10 ],
                 start: function(ev, ui) {
                $(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
                selected = $(".ui-selected").each(function() {
                    $(this).addClass("dragging");
                });
            },
            drag: function(ev, ui) {

            },
                stop: function(e, ui) {  
                    selected.each(function() {
                    $(this).removeClass("dragging");
                    });



                     var Stoppos = $(this).position();
                     var leftPos=Stoppos.left;
                     var topPos= Stoppos.top;
                     var dragId=ui.helper[0].id;
                    // alert(leftPos/10);
                    // alert(topPos/10);
                     // alert(dragId);
                    sectionWidth= $('#'+dragId).parent().width();
                    sectionHeight = $('#'+dragId).parent().height();
                 },
          }).resizable({
             containment: "."+section,
             grid: [10,10],
             start: function(e, ui) {
                 // alert($(".paper-area").width());
                //containment: ".paper-area",
                $(this).css({
                //  position: "absolute",
                 });
            },
            stop: function(e, ui) {
                 // containment: ".paper-area",
                $(this).css({
                //   position: "absolute",
                });
            }
        });
        $("#paper_area").selectable();

      },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {

      }
    });

$( "body" ).on( "click", ".dr", function(evt) { 


            id = $(this).attr("id");

            // check keys
            if ((evt.shiftKey) && (lastselected != '')) {
                // loop all tasks, select area from this to lastselected or vice versa
                bSelect = false;
                $(".task").each(function() {
                    if ($(this).is(':visible')) {
                        if ($(this).attr("id") == id || $(this).attr("id") == lastselected)
                            bSelect = !bSelect; 

                        if (bSelect || $(this).attr("id") == lastselected || $(this).attr("id") == lastselected) {
                            if (!$(this).hasClass("ui-selected"))
                                $(this).addClass("ui-selected");
                        }
                        else
                            $(this).removeClass("ui-selected");
                    }
                });
                return;
            }
            else if (!evt.ctrlKey)
                $(".ui-selected").removeClass("ui-selected"); // clear other selections

            if (!$(this).hasClass("ui-selected")) {
                $(this).addClass("ui-selected");
                lastselected = id;
            }
            else {
                $(this).removeClass("ui-selected");
                lastselected = '';
            }
});


$(".add").click(function() {
     $( "#dialog-form" ).dialog( "open" );
     $("#new_field").hide();
     $("#save_new").hide();
});


$(".add_new").click(function() {
    $(".add_new").hide();
    $("#new_field").show();
    $("#save_new").show();

});

$("#save_new").click(function() {

    $( "#divdata" ).append($('<option>', {
    value: $("#new_field").val(),
    text:  $("#new_field").val(),
    class:'add',
    }));

    $("#new_field").hide();
    $("#save_new").hide();
    $(".add_new").show();

});
})