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