jQuery可拖拽功能不允许拖拽克隆图像。

Question

我想在一个id为cesta的div中放置一张图片，以创建该div内的图像克隆，但我只得到了禁止符号。

HTML

<div id='productos' >
   <h3>PRODUCTOS</h3>
   <img id='ali-12' name='serv' class='productos' src='img/objects_139.jpg' />
   <img id='mon-23' name='serv' class='productos' src='img/objects_132.jpg' />
   <img id='zap-32' name='serv' class='productos' src='img/objects_135.jpg' />
   <img id='gua-21' name='serv' class='productos' src='img/objects_102.jpg' />
   <img id='rod-11' name='serv' class='productos' src='img/objects_136.jpg' />
   <img id='maz-44' name='serv' class='productos' src='img/objects_137.jpg' />
   <img id='lla-97' name='serv' class='productos' src='img/objects_138.jpg' />
   <img id='par-10' name='serv' class='productos' src='img/objects_126.jpg' />
   <img id='cru-24' name='serv' class='productos' src='img/objects_121.jpg' />
   <img id='gaf-15' name='serv' class='productos' src='img/objects_131.jpg' />
</div>
<div id='cesta'>
</div>

JAVASCRIPT

$(document).ready(function(){
    $(".productos").draggable({helper:'clone'});  
    $("#cesta").droppable({
        accept: ".productos",
        drop: function(event,ui){
                $(this).append($(ui.draggable).clone());
        }
    });
});

- jal

---

你使用的是什么浏览器？这里可以运行：http://jsfiddle.net/gaVb7/。 - A. Wolff

@roasted Firefox 最新版本 - jal

这在火狐浏览器v20.0.1下对我有效：http://jsfiddle.net/Cz649/ - A. Wolff

@jal 我只是想知道，你是否包含了jquery-ui脚本？如果是的话，我可以澄清一下，你只想让原始图像可拖动，而不是克隆的图像吗？ - jay c.

已解决：我没有包含 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>。我的愚蠢错误。 - jal

Answer 1

你的代码似乎运行良好。我尝试了一下，完美地运行了。

除了你粘贴的内容之外，我所做的是：

1）添加了2个库

2）添加了一些CSS

JS代码与你的相同。

<script src="libs/jquery.js"></script>
<script src="libs/jquery_ui.js"></script>

<div id='productos' >
   <h3>PRODUCTOS</h3>
   <img id='ali-12' name='serv' class='productos' src='n-2.png' />
   <img id='mon-23' name='serv' class='productos' src='n-3.png' />
   <img id='zap-32' name='serv' class='productos' src='n-4.png' />
   <img id='gua-21' name='serv' class='productos' src='n-5.png' />
   <img id='rod-11' name='serv' class='productos' src='n-6.png' />
   <img id='maz-44' name='serv' class='productos' src='n-7.png' />
</div>
<div id='cesta'>
<script>
$(document).ready(function(){
$(".productos").draggable({helper:'clone'});  
$("#cesta").droppable({
    accept: ".productos",
    drop: function(event,ui){
            $(this).append($(ui.draggable).clone());
    }
  });
});
</script>

http://jsfiddle.net/janakshah89/sSRXk/1/

- Janak