jQuery droppable 向右/向左移动

Posted 2023-05-08

【中文标题】jQuery droppable 向右/向左移动

【英文标题】：jQuery droppable go right/left

【发布时间】：2013-08-13 18:24:31

【问题描述】：

我有这个脚本：http://jsfiddle.net/YuytK/

我需要做点什么，所以当你把它放到左边div时，黑盒子会粘在屏幕的左边，当你把它放到右边div时，它会粘在右边屏幕（如左：0 或右：0）。

代码 jQuery：

$(function() 
    $( "#drag" ).draggable(
        containment: 'body',
        snapTolerance: 100,
    );
);

【问题讨论】：

您是否尝试过阅读 jQuery UI 手册。在您的情况下，尤其是可丢弃的。您尝试做的事情既需要一些规则，也需要一些规则，如果将其放在某个区域会发生什么。

【参考方案1】：

文档是您的朋友，请阅读：http://jqueryui.com/droppable/

http://jsfiddle.net/YuytK/1/

$(function () 
  $("#drag").draggable(containment: 'body');
  $("#left").droppable(
      drop: function () 
          $(this).append("<div>Dropped</div>");
          $("#drag").css(left: "0px", right: "auto");
      
  );
  $("#right").droppable(
      drop: function () 
          $(this).append("<div>Dropped</div>");
          $("#drag").css(right: "0px", left: "auto");
      
  );
);