CODEWITHSUNDEEP
javascriptjqueryjquery-uievent-propagation
wawawoom
wawawoom

Reputation: 101

jQuery UI Droppable, do not propagate event over specific DIV

I'm working on an interface where users can drop "widgets" on "droppable zones" in the page.

The widgets are stored in a div absolutely positionned in the page (on the left, with z-index:1) The droppables zones are in another div in the page.

The problem is : When i drag a widget from the left column to a droppable zone in the page, the droppable event is catch even through the left column div. I want to stop the droppable event when the user drags over the left colum, but keep the event when the user is out of the left column.

HTML

<div id="left">
  <div class="dragMe">Drop me on Yellow</div>
  <div class="dragMe">Drop me on Yellow</div>
  <div class="dragMe">Drop me on Yellow</div>
  <div class="dragMe">Drop me on Yellow</div>
</div>

<div id="right">
  <div class="dropOnMe"></div>
  <div class="dropOnMe"></div>
  <div class="dropOnMe"></div>
  <div class="dropOnMe"></div>
  <div class="dropOnMe"></div>
  <div class="dropOnMe"></div>
</div>

CSS

#left {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 220px;
  z-index: 1;
  background-color: gray;
  padding: 10px;
}

.dropOnMe {
  width: 500px;
  height: 200px;
  display: inline-block;
  background-color: yellow;
}

.dragMe {
  height: 20px;
  width: 200px;
  margin-bottom: 5px;
  border: 1px solid red;
  font-size: 13px;
  background-color: white;
  text-align: center;
  cursor: move;
  font-family: tahoma;
}

.ui-droppable-hover {
  outline: 3px solid red;
}

JS

$(function() {

  $('#left .dragMe').draggable(
    {
      helper: 'clone',
      opacity: 0.5,
      appendTo: 'body',
      zIndex: 11
    }
  );

  $('#right .dropOnMe').droppable(
    {
        drop: function( event, ui ) {

          console.log(event);

        }
      }
    );

});

Check example : http://jsbin.com/judajucuxu/1/edit?html,output

Any idea ?

Thanks.

Upvotes: 0

Views: 100

Answers (2)

Ilia Ross
Ilia Ross

Reputation: 13422

The problem is not in JavaScript code. The problem is in your CSS.

Your left side is always a part of droppable area, because positioned absolutely.

It woks if you fix it in this example.

#left {
      position: relative;
}

Besides, I wouldn't recommend using jQuery UI library for that, because all contemporary browsers has HTML Drag and Drop API.

EDIT 1:

You could also move the right on the width of the left container, to prevent interaction:

#right{
    margin-left: 230px;
}

EDIT 2:

You could also do fancy stuff, once you say you can't change HTML.

Try to detect the cursor offset and decided if you ready to drop your element:

drop: function( event, ui ) {
     if (event.pageX > $('#left').width() + 100) {
         console.log(event);
     }
}

Example

Upvotes: 1

Ishu
Ishu

Reputation: 36

Try this code..

$('#left .dragMe').draggable({
       refreshPositions: true
});

Upvotes: 0

Related Questions