2

I am trying to use jquery collision with draggable. But I have to use same class (dragMe) on both - draggable and obstacle as both elements can be draggable. It doesn't work and element is not even being dragged. Here is the link-

>     http://jsfiddle.net/TLtpM/1/

Please suggest how to do it

pankaj
  • 474
  • 5
  • 15

3 Answers3

1

Please find the jsfiddle for solution.

   <div class="dragMe">Drag me...</div>

   <div class="obstacle">...but not in here.</div>

http://jsfiddle.net/mayankit/TLtpM/2/

Innovation
  • 1,514
  • 17
  • 32
  • 1
    As I have specified in my question I have to use same class on both because both elements can be draggable. I can't use "obstacle" class, I have to use "dragMe" class on obstacle also. – pankaj May 28 '14 at 07:56
0

Got this working with jquery-collision.min.js 1.0.2 and jquery-ui-draggable-collision.min.js 1.0.2.

Just replace your dragMe and obstacle jquery with the following and add a style class to the elements you wish to drag:

$(".dragMe").draggable({
start: function( event, ui ) {
         $(this).removeClass('dragMe'); 
     },
     stop: function( event, ui ) {
         $(this).addClass('dragMe'); 
     },
    obstacle: ".dragMe",
    preventCollision: true,
    containment: "#moveInHere"
});

HTML: 

    <div class=" dragMe dragMeCSS">Drag me...</div>

    <div class="dragMe dragMeCSS">...but not in here.</div>

</div>

http://jsfiddle.net/Minority/zqwer0vr/1/

The removeClass function keeps the element you are dragging from seeing itself as an obstacle. And since you are removing this class while you are dragging the element, it is necessary to create a separate style class for each element so that the style is retained.

Inconspicuous
  • 31
  • 5
0

For select all items that aren't being dragging you cant try with

obstacle: '.dragMe:not(.ui-draggable-dragging)',
Oscar Sanchez
  • 1