Jquery перетащите изменить размер выбрать

Я использую Jqueryui drag изменить размер select все вместе перетаскивание и изменение размера отлично работают но выбор не работает нормально. JSFiddle

Мой код: -

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 command 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>

Я использую drag-select для изменения размера перетаскивания. Любая помощь должна быть оценена.