jquery ui draggable prevent click outside

Question

I've got a draggable div which moving is limited on the y axis. My code :

$(".drag").draggable({ axis: "y" });

This works fine. But, this div is near other ones that have click events. On the y axis, the cursor moves with the draggable objects so all is fine. But on the x axis, the cursor is not limited to the element. So, if the cursor go out the draggable, when i release the button, the events is called on the other elements. Some ideas to limit mouse deplacement on the x axis or to prevent click outside this div when draggable function is running? Thanks you for your help

score 0 · Answer 1 · answered Mar 06 '19 at 22:34

this is missing some information regarding what exactly you want to do, so after reading what you describe, my guess is you want to prevent the event when you finish the dragging, so this can be either at the start or at the end, which I think you want the one at the end. I tried to reproduce your issue having two divs one on the Y axis and the other on the X axis like this: JS

<div class="dragYAxis"></div>
<div class="dragXAxis"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
}

.dragXAxis{
  height: 20px;
  width: 20px;
  background: grey;
}

.dragYAxis{
  height: 20px;
  width: 20px;
  background: white;
}

JS

/* 
Try this solution for your problem and see if it helps too:
$('.dragYAxis').draggable({
        axis: 'y',
        start: function(event, ui) {
            ui.helper.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
        } 
});*/

$(".dragYAxis").draggable({axis: 'y'});

$(".dragXAxis").draggable({axis: 'x'});

$(".dragYAxis").click(function(){
  alert();
});
$(".dragXAxis").click(function(){
  alert();
});

But no double event was made in the releasing of one event on top of another event that also has the draggable, and also has a simple click event.

Can you maybe do your own fiddle and try to reproduce the problem? Other wise you could try to look for some similar solution in this guys prevent event solution:

Preventing click event with jQuery drag and drop

Link to JS fiddle: https://jsfiddle.net/kn30mLpd/

score 0 · Answer 2 · answered Mar 07 '19 at 14:19

Thanks you for your help. And your answer makes me think about the issue. In fact, it was not because of the click event, but because this nearby area was droppable so when my cursor was over it and when I release mousebutton, cause I was clicked on a draggable area, the dialog of the droppable was shown. To disable this effect, I'd hoverride the droppable options of the droppable area to not open dialog if the draggable was not the wished one. Thank you

jquery ui draggable prevent click outside

2 Answers2