#4981 closed bug (notabug)

Opened November 27, 2009 02:40PM UTC

Closed March 17, 2013 03:07PM UTC

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

Attachments (0)
Change History (8)

Changed November 28, 2009 04:43AM UTC by elfkid comment:1

for example

i drag 3 img elements to container

a->b->c

then click a and b are works

click c didn't work

Changed December 13, 2009 11:17AM UTC by jzaefferer comment:2

component: CSS Framework → ui.draggable
milestone: TBD → 1.8

Changed April 17, 2010 10:25PM UTC by ajohnstone comment:3

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>

Changed April 17, 2010 10:27PM UTC by ajohnstone comment:4

Should have stated that it occurs on 1.8: jQuery 1.4

Changed October 11, 2012 02:49PM UTC by scottgonzalez comment:5

milestone: 1.9.0 → 2.0.0

Changed October 25, 2012 01:54PM UTC by petersendidit comment:6

status: new → open
summary: drag and drop bug → Draggable: drag and drop bug

Changed October 28, 2012 08:51PM UTC by mikesherov comment:7

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

http://jsfiddle.net/G9NWt/1/

Changed March 17, 2013 03:07PM UTC by mikesherov comment:8

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.

http://jsfiddle.net/G9NWt/3/