I am trying to allow the dropped element to be draggable and resetable within the pants container.
This is my CSS:
.toolitem {padding: 5px 10px; Background: # ECCCC; Limit: 1 px solid silver} .Labelitim {width: 114px; Padding: 10px5px; Color: # 222; Background: #ff; Range: 1px solid silver} Here's my HTML:
& lt; Header & gt; & Lt; Ul & gt; & Lt; Li & gt; Div id = "atool" class = "toolitem droppable" & gt; A & lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div id = "btool" class = "tooltip droppable" & gt; B & lt; / Div & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div class = "clear" & gt; & Lt; / Div & gt; & Lt; / Header & gt; & Lt; Section ID = "Container" /> This is my JS:
$ (".toolitum"). Draggable ({Opacity: 1, Tolerance: 'Fit', Helper: 'Clone'}); $ ("# Container"). Droppable ({accept: '. Droppable', drop: function (event, UI) {// Check for new or previously deleted element var = IU.draggable.data ("dropped"); if (dropped = = Null & amp; left! = "1") {// A new element is only once labeled as var label = $ (' [label] & lt; / div & gt; ; ';;) Set the label dropped as the label. Make the new element dragable inside the data ("left", "1"); // parent label (Drug Gate: (' Stop: ' Guardian, grid: [2, 2], helper: 'original'}); // parent Resize the new element within the force ({prevention: 'parent'}); // attach the new element to the parent's label. AppendTo (this);}}}); The above code is executed properly, except for the discarded divas, it is not resizable. Please help.
I resolved it myself after googling for one hour, I think I was missing the following:
It was necessary to change the size of the div styles, now everything is working as expected, but weird it has never been mentioned in the jQueryUI documentation or I missed it .
Comments
Post a Comment