JavaScript Drag & Select - все сделано правильно - PullRequest
Новая
       29

JavaScript Drag & Select - все сделано правильно

13 голосов
/ 02 мая 2011

Я пытаюсь написать функцию перетаскивания и выбора, используя HTML и JavaScript. Под этим я подразумеваю, что будет множество объектов с произвольными абсолютными позициями. Я хочу иметь возможность перетаскивать курсор на область, где они расположены. Думайте об этом как о стратегии RTS (выбор единиц измерения) или, альтернативно, любом редакторе векторной графики (выбор объектов для их перемещения и редактирования).

Прежде всего, я знаю о вещах, которые появляются на первых нескольких страницах Google & SO. Поэтому я ни в коем случае не прошу поискать эти вещи для меня и выложить здесь несколько случайных ссылок.

Большинство решений, которые мне удалось найти, в некотором роде ошибочно. Основная проблема заключается в подавлении фактического выделения текста, что, похоже, противоречит самой природе веб-браузера. Некоторые фрагменты кода вызывают мерцание выделения, что меня очень раздражает. Некоторые не ведут себя хорошо во всех основных браузерах.

Я прошу рекомендации кода / библиотек, которые вы на самом деле использовали или видели успешно использованными.

Во-вторых, я бы хотел понять внутреннее содержание JavaScript, стоящее за подавлением выбора. Как это должно быть сделано в теории. Есть ли какой-нибудь хакерский способ добиться этого?

Самое близкое, что мне удалось найти, это: http://view.jquery.com/tags/ui/1.5b2/demos/ui.selectable.html

Однако, похоже, он тесно связан с пользовательским интерфейсом jQuery, который, в свою очередь, требует jQuery 1.3.x, тогда как я с нетерпением ждал использования jQuery 1.5

.

Ответы [ 4 ]

22 голосов
/ 02 мая 2011

Извините за мой английский. Я использую эту библиотеку для перетаскивания, и это здорово. Не уверен, что это то, что вам нужно, но это может помочь:

http://threedubmedia.com/code/event/drop/demo/selection

http://threedubmedia.com/code/event/drag

http://threedubmedia.com/code/event/drop

1 голос
/ 06 сентября 2017

Я не уверен на 100%, правильно ли я понял ваш вопрос. Но я сделал два плагина для обработки описанных вами случаев. Им не нужна никакая зависимость, поэтому нет необходимости в jQuery или чем-то еще. Даже если вы их не используете, код хорошо документирован и должен помочь вам, написав свой собственный.

Для перетаскивания есть dragNdrop
Для выбора механики есть DragSelect

Добро пожаловать. Надеюсь, это поможет!

1 голос
/ 24 июля 2012

Основная проблема заключается в подавлении фактического выделения текста, что, похоже, противоречит самой природе веб-браузера.

Функция, которую вы ищете - e.preventDefault ();

$("#inputform").mousedown(function(e){
    e.preventDefault();
    //console.log('mousedown');
}).mouseup(function(e){
    e.preventDefault();
    //console.log('mouseup');
});

Это просто решает проблему выделения текста.Я вижу различные скрипты drag-select js в Интернете, но почему-то я не могу заставить их работать.

0 голосов
/ 02 мая 2011

Даже если вы хотите использовать jquery 1.5, я все же рекомендую проверить опцию jquery-ui Draggable (из-за того, как я интерпретирую ваше желание, это похоже на то, что вы пытаетесь выполнить).

http://jqueryui.com/demos/draggable/

jquery-ui всегда очень быстро догоняет новейшую версию jquery, и во многих случаях будет работать нормально.Я обнаружил, что jquery-ui, как и любые другие дополнения, которые я обнаружил, всегда остается в курсе последних новостей о jquery.

Что касается желания узнать, как это сделать, вы можетеисследовать несжатое ядро ​​jquery довольно легко.Это довольно хорошо задокументировано и довольно просто читать.

...