Перетащите без JQuery UI

Question

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

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

Answer 1

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

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

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

это все еще jquery, но без интерфейса

Answer 2

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

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

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

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

• mouseup
• mousedown
• одушевленный

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

Answer 3

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

Answer 4

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

Смотрите это.Это ядро ​​JS, и его легко реализовать.

Answer 5

Столкнулся с той же проблемой, и 33,4 килобайта для минимизированного 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');
  }
  }
});

Answer 6

Ответ основан на: https://www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui

для сортировки возможно см .: http://johnny.github.io/jquery-sortable/

var draggable = $('#dragit'); //element 

draggable.on('mousedown', function(e){
	var dr = $(this).addClass("drag").css("cursor","move");
	height = dr.outerHeight();
	width = dr.outerWidth();
	ypos = dr.offset().top + height - e.pageY,
	xpos = dr.offset().left + width - e.pageX;
	$(document.body).on('mousemove', function(e){
		var itop = e.pageY + ypos - height;
		var ileft = e.pageX + xpos - width;
		if(dr.hasClass("drag")){
			dr.offset({top: itop,left: ileft});
		}
	}).on('mouseup', function(e){
			dr.removeClass("drag");
	});
});

#dragit
  {
    background: red;
    width: 50px;
    height: 50px;
    cursor: move;
    position: relative;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dragit">Drag me</div>

Сдерживающее движение

var draggable = $('#dragit-contained'); //element 

draggable.on('mousedown', function(e){
	var dr = $(this).addClass("drag").css("cursor","move");
	height = dr.outerHeight();
	width = dr.outerWidth();
	max_left = dr.parent().offset().left + dr.parent().width() - dr.width();
	max_top = dr.parent().offset().top + dr.parent().height() - dr.height();
	min_left = dr.parent().offset().left;
	min_top = dr.parent().offset().top;

	ypos = dr.offset().top + height - e.pageY,
	xpos = dr.offset().left + width - e.pageX;
	$(document.body).on('mousemove', function(e){
		var itop = e.pageY + ypos - height;
		var ileft = e.pageX + xpos - width;
		
		if(dr.hasClass("drag")){
			if(itop <= min_top ) { itop = min_top; }
			if(ileft <= min_left ) { ileft = min_left; }
			if(itop >= max_top ) { itop = max_top; }
			if(ileft >= max_left ) { ileft = max_left; }
			dr.offset({ top: itop,left: ileft});
		}
	}).on('mouseup', function(e){
			dr.removeClass("drag");
	});
});

.draggable-area
  {
    background: grey;
    width: 320px;
    height: 240px;
  }
#dragit-contained
  {
    background: red;
    width: 50px;
    height: 50px;
    cursor: move;
    position: relative;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="draggable-area">
	<div id="dragit-contained">Drag me</div>
</div>

Answer 7

Я понимаю, что это старый пост, но мне было интересно сделать это без Jquery UI.Я проверил ссылки выше, , но нашел, что это лучший .Он минимизирован только на 8 КБ (пользовательский интерфейс сортируется ~ 30, я читал) и не зависит от какой-либо гигантской библиотеки JQuery (хотя они МОГУТ иногда облегчать нашу жизнь).