jquery - Refresh draggable containment -

I have a dragable element, which is set as a parent prevention. It works great, but the devil material can change it by making it taller. There is no way to trigger drag events, to ensure that it is not the place to move from within the parents. So far, it can overlap parents until it is dragged, then there is a kick in the prevention.

The best mark

I have implemented a small plugin that you want It can apply preventable after the dragable change shape and whenever you are in the midst of a drag I have tested it on jQuery UI 1.8.6 and jQuery 1.4.3, but this is the previous or future release It can break with because its internal methods are to be used.

task demo

full source

plugin

  / * * jQuery UI refresh settings v0 1 * * A plugin for the jQuery UI draggable adds a refresh containment method to each refresh that allows you to use the * prevention option on draggable 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 at any time. $ Window.data ("refreshContainment", {mousePosition: {pageX: 0, pageY : $}}; $ Window.mousemove (function) {$ window.data ("refresh settings", {mousePosition: {pageX: event.pageX, page wi: event.pageY}});}); // Increase drag with proxy pattern Var. Proxied = $ .fn.draggable; $ .fn.draggable = (function (method) {if (method === "ref ("Function") {this.each (function () {var inst = $ (this) .data ("draggable") // check that the draggable is already being dragged. Var isDragging = inst.helper & Amp; inst.helper.is (".ui-draggable-dragging"); // We are going to use the current _mouseStart method to refresh the c but, since we actually are actually // Do not make the right intention, we need to avoid any extrapolation / operation like drag / drop manager and event triggering. // So we save the original member values ​​and change them with dummy. Var ddmanager = $ .ui.ddmanager; $ .ui.ddmanager = null; Var triggers = inst._trigger; Inst._trigger = function () {true back; } Var mouseposition = $ window.data ("refresh control"). Mouseposition; Var fakeEvent = {Page X: MousePosition. PageX, Pagwai: Mouseposition. Pagwai}; Inst._mouseStart (fakeEvent); // Return those unrelated members back to the original values. Inst._trigger = Triggers; $ .ui.ddmanager = ddmanager; // Clear the drag, until it was already being dragged. If (! Handraising) {inst._clear (); }}); This return; } Else {// Deploy other drugs to the actual dragable appropriation. The proxy is back. Aply (this, argument); }}); }) (JQuery);  

Demo HTML

  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Link href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" rel = "stylesheet" type = "text / css" /> & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" & gt; & Lt; / Script & gt; & Lt; Meta charset = UTF-8 / & gt; & Lt; Title & gt; JS bin & lt; / Title & gt; & Lt; Style & gt; # Container {width: 20 degrees; Height: 20 o'clock Limit: 0.5mm solid black; } .draggable {width: 5em; Height: 5 AM; Border: 0.2mm solid black; Status: Completed; } # A {background color: # F55; } #two {background-color: # 5F5; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "container" & gt; & Lt; Div class = "draggable" id = "one" & gt; Drag me & lt; / Div & gt; & Lt; Div class = "draggable" id = "two" & gt; Drag me & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

Demo JavaScript

  var draggables = $ ('draggable'); Draggables.draggable ({prevention: 'guardian', stack: draggables}); Var resizedraggables = function () {each of the draggables (function () {var size = 5+ Math.random () * 5; size = size.stustring () + "em"; $ (this) .css ({width: size , Height: size}};}). Dragable ("refreshContainment"); }; ResizeDraggables (); SetInterval (resizedGraget, 2000);