Opened 14 years ago
Closed 10 years ago
#4981 closed bug (notabug)
Draggable: when using clone helper, the "ui" element in the drop event is the original element, not the clone
Reported by: | elfkid | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 2.0.0 |
Component: | ui.draggable | Version: | 1.7.1 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
<html> <head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script> <script> $(function(){ var $container = $('#container'); $(".obj").draggable({ cursor: 'move', helper:'clone', scope:'mydrag' }); $container.droppable({ accept: '.obj', activeClass: 'myactive', hoverClass: 'myhover', scope:'mydrag', drop: function(e,ui) { $("img").click(function () { $("#textfield").val($(this).attr("id")); }); $(ui.draggable).clone().appendTo($(this)).resizable().parent().draggable({containment: '#container'}); } }); }); </script> <link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" /> <style> #container { height: 98%; width: 50%; border: 3px solid #ccc; float: left; } #headlist { float: right; height: 20%; width: 48%; border: 1px solid #ccc; clear: none; } #hairlist { height: 20%; width: 48%; border: 1px solid #ccc; float: right; margin-top: 5px; } .myactive { opacity: 0.2; filter:alpha(opacity:20); } .myhover { border: 5px solid red; } #headlist img { cursor: move; } #hairlist img { cursor: move; } </style> </head> <body> <div id="container"> </div> <div id="headlist"> <img src="images/1.jpg" width="100" height="100" class="obj" id="a"/> <img src="images/2.jpg" width="100" height="100" class="obj" id="b"/> </div> <div id="hairlist"> <img src="images/a.png" width="100" height="100" class="obj" id="c"/> <img src="images/b.png" width="100" height="100" class="obj" id="d"/> <img src="images/c.png" width="100" height="100" class="obj" id="e"/> <img src="images/d.png" width="100" height="100" class="obj" id="f"/> </div> <input name="" type="text" id="textfield"> </body> </html>
run above code
drag 3 img element
then click on clone img element
the last img element didn't work
Change History (8)
comment:1 Changed 14 years ago by
comment:2 Changed 13 years ago by
Component: | CSS Framework → ui.draggable |
---|---|
Milestone: | TBD → 1.8 |
comment:3 Changed 13 years ago by
The helper: 'clone', works correctly in firefox, however incorrectly on safari, assume chrome too.
<div class="draggableItem">draggableItem</div> <div class="draggableWrapper">draggableWrapper</div> <script> $(".draggableItem").draggable({ revert: 'invalid', helper: 'clone', cursor: 'move', }); $(".groupWrapper").droppable({ drop: function(event, ui) { $(ui.draggable).replaceWith("I should replace the cloned draggableItem within draggableWrapper not the original draggableItem"); } }); </script>
comment:5 Changed 11 years ago by
Milestone: | 1.9.0 → 2.0.0 |
---|
comment:6 Changed 11 years ago by
Status: | new → open |
---|---|
Summary: | drag and drop bug → Draggable: drag and drop bug |
comment:7 Changed 11 years ago by
Summary: | Draggable: drag and drop bug → Draggable: when using clone helper, the "ui" element in the drop event is the original element, not the clone |
---|
comment:8 Changed 10 years ago by
Resolution: | → notabug |
---|---|
Status: | open → closed |
As per the documentation located here: http://api.jqueryui.com/droppable/#event-drop if you'd like to access the helper, use ui.helper, not ui.draggable.
Note: See
TracTickets for help on using
tickets.
for example i drag 3 img elements to container a->b->c then click a and b are works click c didn't work