Question

我正在创建一个情绪板创建器，在尝试将删除完成后将所选图像的自定义属性中的值复制到新div时，我遇到了问题。

当完成放置时，无论我拖放哪个图像，它总是从图像组中的第一个图像获取值。

我创建了一个JSFIDDLE来更好地展示我的问题。

任何帮助都会很棒。谢谢：）

以下是html的一部分:( JSFiddle中的完整代码）

 <div id="images">
<img draggable="true" src="http://i.imgur.com/q9aLMza.png" width="70" height="90"></img>
<div class="hiddenInfo" data-id="1"></div>
<div class="hiddenInfo" data-hiddenCrap="blah blah"></div>
<div class="hiddenInfo" data-hiddenRubbish="bleh bleh"></div>  
 </div>

<div id="images">
<img draggable="true" src="http://i.imgur.com/4YgjsPL.jpg" width="70" height="90"></img>
<div class="hiddenInfo" data-id="2"></div>
<div class="hiddenInfo" data-hiddenCrap="blah blah"></div>
<div class="hiddenInfo" data-hiddenRubbish="bleh bleh"></div>  
</div>

以下是jquery代码的drop部分:(完整代码在JSFIDDLE中）
为了测试，我只是想用正确的ID创建一个警报。

 function handleDrop(e) {
 // this / e.target is current target element.
    e.preventDefault();
      if (e.stopPropagation) {
          e.stopPropagation(); // stops the browser from redirecting.
         }

       var img = document.querySelector('#images img.img_dragging');

        console.log('event: ', e);

        var newImage = new fabric.Image(img, {
             width: img.width,
             height: img.height,
      // Set the center of the new object based on the event coordinates relative
        // to the canvas container.
             left: e.layerX,
              top: e.layerY
                });
            canvas.add(newImage);

        var dropId = $('.hiddenInfo').data('id');
                alert(dropId);

        var dropId2 = $(this).closest('#images').find('.hiddenInfo').data('id');
               alert(dropId2);


       return false;
           }

Answer 1

此处的解决方案：http://jsfiddle.net/wN29y/8/

问题是：

#images的重复ID - 已更改为类

选择元素和属性更改为：

var dropId = $(img).next('.hiddenInfo').data('id');
            alert(dropId);

Jquery拖放在drop事件上获取自定义属性值

1 个答案: