Question

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

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>

的Jscript

$(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' });

Answer 1

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

http://jsfiddle.net/qDZsb/

使添加的元素可拖动

1 个答案: