I have a problem in JS Fiddle .
The main problem is the float: left property.
I have code that allows you to drag and drop elements that have the float: left property. They create a problem when I want to place controls in parallel in the next area of the div.
The problem is more clear if you look at the JS script. Below are the steps to get through Fiddle.
- click add div
- it divides the red div into two fields
- now drag and drop at least two or three of the top controls (for example, first name, last name) into the red frame on the left.
- now drag another control to the right side
Here's the problem: the control on the right of the div is on the left to the last control on the left of the div .
Myhtml.html
<input type="button" class="Mybutton" value=" Add div" /> <br /> <div class="selectorField draggableField ui-draggable ui-resizable" style=" width:250px;"> <div id="new" style="margin-bottom:10px; "> <div style="width:80px; float:left;"> <span id="LabelU1">FirstName : </span> </div> <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;"> <input name="FirstName" type="text" id="FirstName" style="width:90%;;border:none;resize:none;float:left;"> </div> </div> <div style="clear:both;"></div> <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> </div> <div height="100%" width="100%"></div> <div class="selectorField draggableField ui-draggable ui-resizable" style=" width:250;"> <div id="new" style="margin-bottom:10px; "> <div style="width:80px; float:left;"> <span id="LabelU2">LastName : </span> </div> <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;"> <input name="LastName" type="text" id="LastName" style="width:90%;;border:none;resize:none;float:left;"> </div> </div> <div style="clear:both;"></div> <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> </div> <div height="100%" width="100%"></div> <div class="selectorField draggableField ui-draggable ui-resizable" style=" width:200px;"> <div id="new" style="margin-bottom:10px; "> <div style="width:80px; float:left;"> <span id="LabelU3">Web : </span> </div> <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;"> <input name="Web" type="text" id="Web" style="width:90%;;border:none;resize:none;float:left;"> </div> </div> <div style="clear:both;"></div> <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> </div> <div height="100%" width="100%"></div> <div class="selectorField draggableField ui-draggable ui-resizable" style=" width:250px;"> <div id="new" s tyle="margin-bottom:10px; "> <div style="width:80px; float:left;"> <span id="LabelU4">Mobile : </span> </div> <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;"> <input name="Mobile" type="text" id="Mobile" style="width:90%;;border:none;resize:none;float:left;"> </div> </div> <div style="clear:both;"></div> <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> </div> <div height="100%" width="100%"></div> <div class="selectorField draggableField ui-draggable ui-resizable" style=" width:250px;"> <div id="new" style="margin-bottom:10px; "> <div style="width:80px; float:left;"> <span id="LabelU5">jot : </span> </div> <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;"> <input name="jot" type="text" id="jot" style="width:90%;;border:none;resize:none;float:left;"> </div> </div> <div style="clear:both;"></div> <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> </div> <div height="100%" width="100%"></div> <div id="Section1" style="height: 100px; line-height: 20px; width: 100%; border: 1px dotted red; display: table;"> <div class="well droppedFields ui-sortable Resizable" style="width:73px;"></div> </div>
Myjquery.js
function makeDraggable() { $(".selectorField") .draggable({ containment: $('body'), helper: "clone", stack: "div", cursor: "move", cancel: null }); } $(function () { var _ctrl_index = 1001; // function docReady() { $(".Resizable").resizable({ handles: 'e' }); makeDraggable(); $(".droppedFields").droppable({ accept: ":not(.ui-sortable-helper)", drop: function (event, ui) { var draggable = ui.draggable; draggable = draggable.clone(); draggable.appendTo(this); // $(ui.draggable).hide(); makeDraggable(); } }); var count = 0; $('.Mybutton').click(function () { count++; if (count < 5) { // alert("aa"); var a = $("<div class='well droppedFields ui-sortable Resizable'></div>").appendTo("#Section1"); a.droppable(); a.resizable({ handles: 'e' }); a.droppable({ accept: ":not(.ui-sortable-helper)", drop: function (event, ui) { var draggable = ui.draggable; draggable = draggable.clone(); draggable.appendTo(this); // $(ui.draggable).hide(); makeDraggable(); } }); } else { alert('No more divs to add'); } }); });
source share