jquery-ui: немедленное перетаскивание на mousedown

Работа с jQuery-UI, можно сделать элемент перетаскиваемым, применяя метод .draggable() на mousedown событие. Затем перетащите его на другое нажатие мыши (и перетащите). Возможно ли сделать элемент перетаскиваемым и начать перетаскивание сразу одним нажатием мыши (событие mousedown).jquery-ui: немедленное перетаскивание на mousedown

Что происходит:

1) нажми синий прямоугольник и попытаться перетащить (элемент не подвижным);

2) unpress rect и попробуйте снова перетащить (элемент перемещается).

Что должен произойти:

1) нажмите синий прямоугольник и перетащите его -> элемент выполнен с возможностью перемещения.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>draggable() on press</title> 
     <meta charset='UTF-8'/> 
     <style>#rect{ border: 1px dotted blue; width:100px; height:100px; background-color: lightblue;}</style> 
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> 
     <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script> 
     <script> 
      $(document).ready(function(){ 
       console.log('document is ready'); 
       $('#rect').mousedown(function(ev){ 
        console.log(ev.target.id+' pressed'); 
        $(ev.target).draggable(); 
        // $(this).draggable(); // Works the same. 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id='rect'></div> 
    </body> 
</html>

источник

2016-11-07 Andrey

Вам необходимо повторно вызвать mousedown событие после инициализации виджета. Вы можете использовать .trigger для этого:

$('#rect').mousedown(function(ev){ 
    console.log(ev.target.id+' pressed'); 
    if (!$(ev.target).data("ui-draggable")) { 
     $(ev.target).draggable(); 
     $(ev.target).trigger(ev); 
    } 
});

Примечания перетаскиваемых проверок данных: вы должны сделать это только один раз (или вы получите повторно инициализирован виджет и, возможно, бесконечный триггер события рекурсии)

Также это поведение по умолчанию, если вы только виджет перетаскиваемым (например, на документе, готов)

$("#rect").draggable();

и не заморачиваться с mousedown вообще. Это то, что вы должны делать, если у вас есть очень веские основания настаивать на использование события, которое не упоминается в вопросе

скрипки: https://jsfiddle.net/9ame9ege/

источник

2016-11-07 15:09:17 blgt

jquery-ui: немедленное перетаскивание на mousedown

ответ

Смежные вопросы