0

我正在使用一个可点击的图标，一旦你点击它。它将在 div 中添加另一个图标，我想将创建的图标设置为可拖动的，并且从检查元素中它是可拖动的，但我无法将它拖动到我的屏幕上。有人可以检查似乎是什么问题吗？

HTML：

<div id = icon>
<img class="icon" src="../../Pictures/bulb.png" width="50" height="50"/>
<img class="icon" src="../../Pictures/snow.png" width="50" height="50"/>
</div>

脚本

$(function () {
 $('.icon').click(function () { DrawImage($(this).attr('src')); });
});
function DrawImage(a) {
    image = document.createElement('img');
    image.setAttribute('class', 'drag');
    image.setAttribute('src', a);
    image.setAttribute('draggable', 'true');
    image.setAttribute('style', 'position:relative; top:0px; left:0px;');
    image.height = 50;
    image.width = 50;
    $('#icon').append(image);
}

在我的 html 头上添加了这个

   <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")"></script>

更新：

通过克隆图像元素并为其分配一些属性来修复它

var iconnew = $(iconimg).clone();
iconnew.attr({ "id": "clone"});
iconnew.css({'top':mouseY, 'left':mouseX})
iconnew.appendTo('#drag').draggable({ containment: '#bg' });
4

1 回答 1

1

当您将图像元素附加到 DOM 时，我认为您实际上并没有在图像元素上启用可拖动功能。您可以尝试将 DrawImage 函数更改为：

http://jsfiddle.net/qDZsb/

于 2012-04-17T09:21:28.077 回答