Перетаскивание без интерфейса JQuery

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

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

Ответы

Ответ 1

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

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

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

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

  • MouseUp
  • MouseDown
  • одушевленные

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

Ответ 4

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

$('.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');
  }
  }
});

Ответ 6

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