Перетаскивание без пользовательского интерфейса JQuery

Я много искал, чтобы найти учебник для перетаскивания с помощью jQuery (без пользовательского интерфейса), но из-за популярности jQuery UI все функции перетаскивания основаны на jQuery UI.

может ли кто-нибудь дать мне подсказку, как сделать базовое перетаскивание jQuery автономным?

15
drag-and-drop draggable javascript jquery

6 ответов

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

таким образом, пользовательский процесс может быть:

  • нажмите на свой контент div на" перетаскиваемой " области
  • перетащите содержимое, которое будет держать содержимое внутри этого div
  • отпустите мышь, которая поместит содержимое в контейнер" droppable", который отрегулирует размер предыдущего содержимого на установите размер droppable

, который нуждается в следующих видах прослушиватели событий:

  • mouseup
  • mousedown
  • анимация

по крайней мере. Другой вариант может быть проверить источник пользовательского интерфейса jQuery и посмотреть, как они это делают! Который скажет вам, что именно делать, но вы можете добавить к нему или обрезать, когда это необходимо.

8

есть несколько плагинов, которые вы можете использовать взглянуть на следующее

http://wayfarerweb.com/jquery/plugins/animadrag/

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

Это все еще jquery, но не UI

12

http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery

это видеть. Это core JS и прост в реализации.

3

Я нашел это очень полезно: http://draggabilly.desandro.com/

3

столкнулся с той же проблемой, и 33,4 килобайта для minified jqueryUI с только перетаскиваемым и сбрасываемым слишком велики для ограниченной функциональности, в которой я нуждался. Приведенный ниже подход не является рабочим кодом - это просто простая структура для визуализации того, что должно произойти.

$('.draggable').on{
  mousemove : function(){
    var mouseposition = { // this also needs to account for onclick offset of pointer vis-a-vis element
        x : pageX,
        y : pageY 
    };
    $(this).css({
      top : mouseposition.y,
      left : mouseposition.y
    });
  if( // this statement is kinda bogus, idea is to perform a collision detection via coordinate comparison
    $('.draggable').offset().top < $(.droppable').offset().top 
    &&
    $('.draggable').offset().left < $(.droppable').offset().left
  ) {
      alert('the item has been dropped');
  }
  }
});
2

Я понимаю, что это старый пост, но мне также было интересно сделать это без jQuery UI. Я проверил ссылки выше, но я нашел это лучшим. Это всего лишь 8kb minified (UI sortable ~30, я читал) и не зависит от какой-либо гигантской библиотеки JQuery (хотя иногда это может облегчить нашу жизнь).

1