jQuery可拖拽/可拖拽目標組件

Question

我有一個可拖拽/拖拽的股票設置。這基本上是一個拼圖，但是一個簡單的拼圖就是正確的拼圖。我抓住了拼圖和拼圖碎片。但是，當我將第1塊拖放到第2個地方時，它不會將其顯示爲無效。如何區分定位區域？

HTML：

<div id="drag"> 
    <div id="piece-drag"> 
     <div id="piece1"> 
      <img src="anim/hoffmann3-anklebridge/pin 1.png" /> 
     </div> 
     <div id="piece2"> 
      <img src="anim/hoffmann3-anklebridge/pin 2.png" /> 
     </div> 
    </div> 
    <div id="place-drop" style="background:url(puzzleshape.png) no-repeat;"> 
     <div id="piece1drop" style="width:103px; height:36px; position:absolute; z-index:50; top:346px; left:241px;"></div> 
     <div id="piece2drop" style="width:103px; height:36px; position:absolute; z-index:50; top:333px; left:228px;"></div> 
    </div> 
</div> 

JQuery的：

$(function(){ 
      $("#piece1").draggable({ revert: "invalid" }); 
      $("#piece1drop").droppable({ 
       drop: function() { 
        $('#piece1').hide(); 
        $('#piece1drop').css('background-image', 'url("piece1placed.png")'); 
       } 
      }); 
      $("#piece2").draggable({ revert: "invalid" }); 
      $("#piece2drop").droppable({ 
       drop: function() { 
        $('#piece2').hide(); 
        $('#pin2drop').css('background-image', 'url("piece2placed.png")'); 
       } 
      }); 
     }); 

Answer 1

添加accept: "#selector"作爲一個選項，可放開插件：

$(function(){ 
      $("#piece1").draggable({ revert: "invalid" }); 
      $("#piece1drop").droppable({ 
       drop: function() { 
        $('#piece1').hide(); 
        $('#piece1drop').css('background-image', 'url("piece1placed.png")'); 
       }, 
       accept: "#piece1" 
      }); 
      $("#piece2").draggable({ revert: "invalid" }); 
      $("#piece2drop").droppable({ 
       drop: function() { 
        $('#piece2').hide(); 
        $('#pin2drop').css('background-image', 'url("piece2placed.png")'); 
       }, 
       accept: "#piece2" 
      }); 
    }); 

Here's the jQuery Demo