0

我正在创建一个情绪板创建者，在尝试将所选图像的自定义属性中的值复制到新的 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 代码的删除部分：（完整代码在 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;
           }
4

1 回答 1

0

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

问题是：

#images 的重复 ID - 更改为类

选择元素和属性更改为：

var dropId = $(img).next('.hiddenInfo').data('id');
            alert(dropId);
于 2013-10-06T00:27:30.230 回答