turn.js與拖放圖像兩次滴圖像

Question

我有以下代碼，我正在使用turn.js和除第13頁以外的作品 - 當我將圖像放到第11頁時，同一圖像出現在第13頁（它直接在屏幕的第11頁後面）。

<div class="page"><img src="<?=$book;?>/front.jpg" alt="" /><span class="front"></div> 
<div class="page"><img src="<?=$book;?>/blank.jpg" alt="" /></div> 
<div class="page"><img src="<?=$book;?>/dedication.jpg" alt="" /></div> 
<div class="page drop" id="drop4"><img src="<?=$book;?>/drag4.jpg" alt="" /></div> 
<div class="page" id="page5"></div> 
<div class="page drop" id="drop6"><img src="<?=$book;?>/drag6.jpg" alt="" /></div> 
<div class="page drop" id="drop7"><img src="<?=$book;?>/drag7.jpg" alt="" /></div> 
<div class="page drop" id="drop8"><img src="<?=$book;?>/drag8.jpg" alt="" /></div> 
<div class="page" id="page9"><img src="<?=$book;?>/9.jpg" alt="" /></div> 
<div class="page drop" id="drop10"><img src="<?=$book;?>/drag10.jpg" alt="" /></div> 
<div class="page drop" id="drop11"><img src="<?=$book;?>/drag11.jpg" alt="" /></div> 
<div class="page drop" id="drop12"><img src="<?=$book;?>/drag12.jpg" alt="" /></div> 
<div class="page drop" id="drop13"><img src="<?=$book;?>/drag13.jpg" alt="" /></div> 
<div class="page drop" id="drop14"><img src="<?=$book;?>/drag14.jpg" alt="" /></div> 
<div class="page" id="page15"><img src="<?=$book;?>/15.jpg" alt="" /></div> 
<div class="page drop" id="drop16"><img src="<?=$book;?>/drag16.jpg" alt="" /></div> 
<div class="page" id="page17"><img src="<?=$book;?>/17.jpg" alt="" /></div> 
<div class="page" id="page18"><img src="<?=$book;?>/18.jpg" alt="" /></div> 
<div class="page"><img src="<?=$book;?>/blank.jpg" alt="" /></div> 
<div class="page"><img src="<?=$book;?>/back.jpg" alt="" /></div> 

<img class="drag" src="<?=$book;?>/4.jpg" alt="" /> 
<img class="drag" src="<?=$book;?>/6.jpg" alt="" /><br /> 
<img class="drag" src="<?=$book;?>/7.jpg" alt="" /> 
<img class="drag" src="<?=$book;?>/8.jpg" alt="" /><br /> 
<img class="drag" src="<?=$book;?>/10.jpg" alt="" /> 
<img class="drag" src="<?=$book;?>/11.jpg" alt="" /><br /> 
<img class="drag" src="<?=$book;?>/12.jpg" alt="" /> 
<img class="drag" src="<?=$book;?>/13.jpg" alt="" /><br /> 
<img class="drag" src="<?=$book;?>/14.jpg" alt="" /> 
<img class="drag" src="<?=$book;?>/16.jpg" alt="" /><br /> 

因此，如果直接在放置區域下方存在可放置區域，則會執行以下代碼兩次。

$(".drag").draggable({ 
    drag: function(event,ui){ 
     $this = $(this); 
     $('.drop').droppable({ 
     drop: function(event,ui){ 
     var src = $this.attr('src'); 
     $this.hide(); 
     $(this).html('<img src="'+src+'" style="width:100%;">'); 
     } 
    }); 
    } 
}); 

我的問題是（我希望我已經給了足夠的信息）如何防止第13頁繼承11頁的內容是什麼？順便說一下，這種情況仍然會發生，即使我先將圖像拖放到13上 - 它仍然會繼承我掉到第11頁上的圖像。

感謝您的任何想法！

我剛剛注意到，這種行爲隨時會發生在一個圖像被放置到直接位於另一個可放置區域頂部的可放置區域上。

這裏有一個小提琴：http://jsfiddle.net/e2p6xydg/14/ <可能需要檢查jQuery UI的複選框

Answer 1

從網上得到編譯的答案 - 感謝我的朋友：

$(".drag").draggable({ 
drag: function (event, ui) { 


}, 
start: function (event, ui) { 
    $('.drop').droppable({ 
     drop: function (event, ui) { 
      var droppable = $(this); 
      ui.helper.css({ pointerEvents: 'none' }); 
      var onto = document.elementFromPoint(event.clientX, event.clientY); 
      ui.helper.css({ pointerEvents: '' }); 
      if (!droppable.is(onto) && droppable.has(onto).length === 0) { 
       return; 
      } 

      $this = $(this); 
      $this.find('img').attr('src', ui.draggable[0].src); 
      $(ui.draggable[0]).hide(); 
     } 
    }); 
} 
});