Drag and drop bug?
<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 ... class="obj" id="a"/
</div>
<div id="hairlist">
img... class="obj" id="c"/
</div>
<in开发者_开发百科put 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
for example i drag 3 img elements to container a->b->c then click a and b are works click c didn't work
Try using this:
var $container = $('#container');
$container.droppable({
accept: '.obj',
activeClass: 'myactive',
hoverClass: 'myhover',
scope:'mydrag',
drop: function(e,ui) {
$(ui.draggable).clone()
.appendTo($(this))
.resizable()
.parent().draggable({containment: $container});
}
});
$(".obj").draggable({
cursor: 'move',
helper: 'clone',
scope: 'mydrag'
});
$("#container img").live('click',function () {
$("#textfield").val($(this).attr("id"));
});
By using the live click event you don't have to assign it to every new image you drop in the container.
加载中,请稍侯......
精彩评论