Menu
The draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the HTML Drag and Drop API.
Introduction to JavaScript Drag and Drop API To drag an image, you simply hold the mouse button down and then move it. To drag the text, you need to highlight some text and drag it in the same way as you would drag an image.
The ondrop event attribute is used to drag an element or text and drop it into a valid droppable location or target. The drag and drop is the common feature of HTML 5. Note: By default, the images and links are draggable.
is it possible to start the drag with another element?
For example: http://jsbin.com/igohod/edit#preview
I want to start dragging #ct when I click on the #icon. Notably, #icon is not descended from #ct in the DOM tree.
html
<div style="position:absolute; top:20px; left:10px;">
<div id="icon">Icon</div>
</div>
<div style="position:absolute; top:20px; right:10px;">
<div id="ct">start this drag when you drag the icon</div>
</div>
js
$(document).ready(function()
{
// $('#icon').draggable();
$('#ct').draggable();
});
UPDATE:
New example with sortable
http://jsbin.com/igohod/8/edit#preview
Solution
http://jsbin.com/igohod/13/edit#preview
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With