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 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>
I am using drag-select for drag resize.Any help should be Appreciated.
