CODEWITHSUNDEEP
jqueryjquery-uidraggablejquery-ui-draggable
Bhumi Singhal
Bhumi Singhal

Reputation: 8297

Adding containment option to draggable in its drag function

I have draggable div("dragging") and target div("dragto").

I want that when the "dragging" div is dragged enough that it is above the "dragto" div, the containment of the "dragging" div gets set to the [x1,y1,x2,y2] of the "dragto" div, so that once it has entered that div it is never able to leave that div.

This containment is to be set before the dragging ends and after it startd, i.e during the drag function where I can check if the "dragging" div is inside the "dragto" div.

Is it possible. If I add the following code:

drag : function (event,ui){

   $("#dragging").draggable("option","containment",[x1,y1,x2,y2]);
   },

this sets the containment only when once the dragging has stopped.

Upvotes: 0

Views: 2879

Answers (3)

Andrija
Andrija

Reputation: 457

I know that this is an old question, but I stumbled on similar problem and was unable to find solution on SO. Eventually, I figured out how to set containment option to draggable after the dragging has started (e.g. while element is dragged, some condition was suddenly fulfilled so you want to add containment to draggable at that point..).

Since containment is calculated only at the beginning of the drag, there is only one line of code that has to be added for containment to work after dragging has started (besides the code already given in question):

$("#dragging").draggable("option","containment",[x1,y1,x2,y2]);
$("#dragging").data('uiDraggable')._setContainment();

Note: If this functionality is really needed in 'drag' function, it would be wise to add some condition to this code to ensure that it is executed only once. Since 'drag' function is called every time mouse changes position while draggable is dragging, there is no point in setting containment over and over again...

Upvotes: 4

sdespont
sdespont

Reputation: 14025

It is not an existing feature, but you could figure it out by overwriting the position of the element being dragged.

Here is not the code "ready to go" but pieces permitting to develop yourself. The idea is to set containment positions variables in the hover event of your droppable element and test them with the current dragging position in the drag event of your dragging element.

This fiddle is an example of the position overriding : http://jsfiddle.net/QvRjL/74/

This fiddle is an example of how you could do to check if the dragged element is near a border of your container : http://jsfiddle.net/pPn3v/22/

Position overwriting example :

$(document).mousemove(function(e){
   window.mouseXPos = e.pageX;
   window.mouseYPos = e.pageY;
}); 

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },        
        scroll: true,
        stop: function(){},  
        drag : function(e,ui){            
            //Force the helper position
            ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
            ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top; 
        });
});

Upvotes: 0

Amar
Amar

Reputation: 1936

You can set this inside start:function(event,ui){}, this event will trigger while you start dragging.

Check this link.

http://jqfaq.com/category/widgets/autocomplete/

Upvotes: 2

Related Questions