jquery – 刷新可拖动的包含

我有一个可以将包含设置为父级的可拖动元素.这很有效,但div内容可以改变,使其更高.无论如何都要触发拖动事件,以确保它不会从其父内部移动.现在,它可以与父项重叠,直到它被拖动然后包含开始.

最好的祝福
标记

解决方法

我已经实现了一个小插件,可以满足您的需求.它可以在可拖动的更改大小之后强制执行包含,甚至可以在您拖动时进行操作.我已经使用jQuery UI 1.8.6和jQuery 1.4.3测试了它,但它可能会破坏过去或未来的版本,因为它必须使用内部方法.

工作演示

http://jsbin.com/uvino4/27

完整来源

插入

/*
 * jQuery UI RefreshContainment v0.1
 *
 * A plugin for jQuery UI's Draggable. It adds a refreshContainment method to
 * every draggable which allows you to use the containment option on draggables
 * with dynamically changing sizes.
 *
 * Depends:
 *  jquery.ui.core.js
 *  jquery.ui.widget.js
 *  jquery.ui.mouse.js
 *  jquery.ui.draggable.js
 */

(function ($){
  var $window = $(window);

  // We need to kNow the location of the mouse so that we can use it to
  // refresh the containment at any time.

  $window.data("refreshContainment",{mousePosition: {pageX: 0,pageY: 0}});
  $window.mousemove(function (event) {
    $window.data("refreshContainment",{
      mousePosition: {pageX: event.pageX,pageY: event.pageY}
    });
  });

  // Extend draggable with the proxy pattern.
  var proxied = $.fn.draggable;
  $.fn.draggable = (function (method){
    if (method === "refreshContainment") {
      this.each(function (){
        var inst = $(this).data("draggable");

        // Check if the draggable is already being dragged.
        var isDragging = inst.helper && inst.helper.is(".ui-draggable-dragging");

        // We are going to use the existing _mouseStart method to take care of
        // refreshing the containtment but,since we don't actually intend to
        // emulate a true _mouseStart,we have to avoid any extraneous
        // operations like the drag/drop manager and event triggering.
        // So we save the original member values and replace them with dummies.
        var ddmanager = $.ui.ddmanager;
        $.ui.ddmanager = null;
        var trigger = inst._trigger;
        inst._trigger = function () { return true; }


        var mousePosition = $window.data("refreshContainment").mousePosition;
        var fakeEvent = {
          pageX: mousePosition.pageX,pageY: mousePosition.pageY
        };
        inst._mouseStart(fakeEvent);

        // Return those extraneous members back to the original values.
        inst._trigger = trigger;
        $.ui.ddmanager = ddmanager;

        // Clear the drag,unless it was already being dragged.
        if (!isDragging) {
          inst._clear();
        }
      });
      return this;
    }
    else {
      // Delegate all other calls to the actual draggable implemenation.
      return proxied.apply(this,arguments);
    }
  });
})(jQuery);

演示HTML

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<Meta charset=utf-8 />
<title>JS Bin</title>

<style>
  #container { width: 20em; height: 20em; border: 0.5em solid black; }
  .draggable { width: 5em; height: 5em; border: 0.2em solid black; position: absolute; }
  #one { background-color: #F55; }
  #two { background-color: #5F5; }
</style>
</head>
<body>
  <div id="container">
    <div class="draggable" id="one">drag me</div>
    <div class="draggable" id="two">drag me</div>
  </div>
</body>
</html>

演示JavaScript

var draggables = $('.draggable');

draggables.draggable({containment: 'parent',stack: draggables});

var resizeDraggables = function (){
  draggables.
    each(function (){
      var size = 5 + Math.random() * 5;
      size = size.toString() + "em";
      $(this).css({width: size,height: size});
    }).
    draggable("refreshContainment");
};

resizeDraggables();

setInterval(resizeDraggables,2000);

jquery – 刷新可拖动的包含

解决方法

相关文章