Question

<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>
<input name="" type="text" id="textfield">

</body>
</html>

运行代码

拖动3 img元素

然后点击clone img element

最后一个img元素不起作用

例如我将3个img元素拖到容器a-＆gt; b-＆gt; c然后单击a和b是作品点击c不起作用

Answer 1

尝试使用：

    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"));
    });

通过使用实时点击事件，您无需将其分配给放入容器中的每个新图像。

拖放bug？

1 个答案: