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 に答える