Функция JavaScript Drag & Select выполнена правильно

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

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

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

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

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

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

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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

Приветствую вас. Надеюсь, что это поможет!

Ответ 4

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

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

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

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