Question

我有两个可拖动的div，两个可以放置。

我无法找到或想办法做到以下几点：

使两个可拖动的div和两个droppable div在没有大量复制粘贴代码的情况下表现相同。
将捕捉阈值增加到可拖动div自动移动到位的位置。
如果可拖动的div放在droppable div内部，则需要将其重置为最后一个捕捉位置。\

我只是一个初学者，所以请在我的帖子中告诉我任何错误，以便我可以编辑并向他们学习。

＆＃13;

<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
		   #destination {
			  width: 150px;
			  height: 150px;
			  background-color: red;
		  }	
		  
		   #draggable { width: 150px; height: 150px; background:#eee;}
		 
	   </style>
      
      <script>
         $(function() {
            $( "#draggable" ).draggable({ snap: "#destination" });
			$( "#destination" ).droppable();
         });
      </script>
   </head>
   
   <body>
    	 <div id="destination">
      	destination
      </div>    

     
      <div id = "draggable">
         <p>Drag me !!!</p>
      </div>
     
      <div id="destination">
      	destination
      </div>    
      
      <div id = "draggable">
         <p>Drag me !!!</p>
      </div>
      
   </body>
</html>

＆＃13;

Answer 1

你可以这样做。

将相同属性分别设置为可拖动目标和可放置目标，以避免复制和粘贴。

使用snapMode: 'inner'使可拖动的div移动到位自动。 snapTolerance可以更改阈值。

最后，revert:'invalid'表示如果放置在droppable div内部，可拖动div将恢复到最后位置。

如果你想将draggable1对设为droppable1，你可以添加另一个属性并将accept选项传递给droppable() init函数。

＆＃13;

<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
		   [data-action='droppable'] {
			  width: 150px;
			  height: 150px;
			  background-color: red;
		  }	
		  
		   [data-action='draggable'] { width: 150px; height: 150px; background:#eee;}
		 
	   </style>
      
      <script>
         $(function() {
            $( "[data-action='draggable']" ).draggable({ 
              snap: "[data-action='droppable']", 
              snapMode: 'inner',
              snapTolerance: 50,
              revert: 'invalid'
            });
            $( "[data-action='droppable']" ).droppable({
              accept: function(dragTarget) {
                return $(this).attr('data-pair') === $(dragTarget).attr('data-pair');
              }
            });
         });
      </script>
   </head>
   
   <body>
      <div id= "destination1" data-action='droppable' data-pair='1'>
      	destination1
      </div>    

     
      <div id = "draggable1" data-action='draggable' data-pair='1'>
         <p>Drag me1 !!!</p>
      </div>
     
      <div id= "destination2" data-action='droppable' data-pair='2'>
      	destination2
      </div>    
      
      <div id = "draggable2" data-action='draggable' data-pair='2'>
         <p>Drag me2 !!!</p>
      </div>
      
   </body>
</html>

＆＃13;

Jquery增加可下降的捕捉阈值并重置它的位置，如果不能发生快照

1 个答案: