JQuery UI Draggable предотвратить щелчок снаружи - PullRequest
Новая
       20

JQuery UI Draggable предотвратить щелчок снаружи

1 голос
/ 05 марта 2019

У меня есть перетаскиваемый div, перемещение которого ограничено по оси y. Мой код: 

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

Это отлично работает. Но этот div рядом с другими, которые имеют события щелчка. На оси Y курсор перемещается вместе с перетаскиваемыми объектами, поэтому все в порядке. Но на оси х курсор не ограничен элементом. Таким образом, если курсор выходит из режима перетаскивания, когда я отпускаю кнопку, события вызывают для других элементов. Некоторые идеи по ограничению перемещения мыши по оси x или по предотвращению щелчка за пределами этого деления, когда работает перетаскиваемая функция? Спасибо тебе за помощь

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Спасибо вам за вашу помощь.И ваш ответ заставляет меня задуматься о проблеме.Фактически, это было не из-за события щелчка, а потому, что эта близлежащая область была сбрасываемой, поэтому, когда мой курсор находился над ней и когда я отпускаю кнопку мыши, потому что меня нажимают в перетаскиваемой области, отображается диалоговое окно сбрасываемой области.Чтобы отключить этот эффект, я бы поменял параметры перетаскивания в области перетаскивания, чтобы не открывать диалог, если перетаскиваемый объект не был желаемым.Спасибо

0 голосов
/ 07 марта 2019

в нем отсутствует некоторая информация относительно того, что именно вы хотите сделать, поэтому после прочтения того, что вы описываете, я думаю, что вы хотите предотвратить событие, когда закончите перетаскивание, так что это может быть либо в начале, либо в конце, который я думаю, что вы хотите тот, в конце.Я попытался воспроизвести вашу проблему с двумя делителями, один по оси Y, а другой по оси X, следующим образом: 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();
});

Но двойного события не было сделано при выпуске одного события поверх другого события, которое также имеет перетаскиваемое событие и имеет простое событие щелчка.

Можете ли вы сделать свою собственную скрипку и попробоватьвоспроизвести проблему?В противном случае вы можете попытаться найти какое-то похожее решение в этом решении для предотвращения событий:

Предотвращение события щелчка с помощью перетаскивания jQuery

Ссылка на скрипту JS: https://jsfiddle.net/kn30mLpd/

...