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>

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

1 に答える 1

1

画像要素をDOMに追加するときに、画像要素でドラッグ可能な機能を実際に有効にしているとは思いません。DrawImage 関数を次のように変更してみてください。

http://jsfiddle.net/qDZsb/

于 2012-04-17T09:21:28.077 に答える