Html Drag and Drop с помощью jQuery без Draggable - PullRequest
Новая
       35

Html Drag and Drop с помощью jQuery без Draggable

0 голосов
/ 10 января 2012

Может ли кто-нибудь опубликовать минималистичный пример реализации drag'n'drop с использованием jQuery без использования перетаскиваемого поведения? Насколько я понимаю, он не должен быть длиннее 10 строк.

У меня есть следующий HTML: 

<div id="container" style="width:500px; height:500px;">
  <div id="draggable" style="width:10px; height:10px; background-color:blue;" />
</div>

Я хочу сделать синий квадрат перетаскиваемым так.

У меня работает моя реализация, но она выглядит довольно чудовищно, поэтому я хотел бы получить от вас класс, ребята.

Ответы [ 2 ]

1 голос
/ 10 января 2012

Я предполагаю, что под "без перетаскивания" вы подразумеваете без jQuery UI. Вы могли бы сделать что-то вроде этого: 

var dragging = false;
$("#draggable").mousedown(function() {
   dragging = true; 
}).mouseup(function() {
   dragging = false; 
});
$(document).mousemove(function(e) {
    if(dragging) {
        $("#draggable").css({left: e.pageX, top: e.pageY});  
    } 
});

Это далеко не идеально, но этого должно быть достаточно, чтобы вы начали. Например, он не будет ограничивать перетаскивание в контейнер.

Вот рабочий пример .

0 голосов
/ 10 января 2012

Вот как бы я это сделал: 

$('#draggable').on('mousedown', function (evt) {
  var offset = {x: evt.offsetX || evt.originalEvent.layerX, y: evt.offsetY || evt.originalEvent.layerY};

  // bind mousemove only if dragging is actually happening
  $(document).on({
    // delegate the mousemove event to the draggable element
    'mousemove.drag': $.proxy(function(evt) {
      $(this).css({left: evt.pageX - offset.x, top: evt.pageY - offset.y});
    }, this),

    // unbind namespaced events on mouseup
    'mouseup.drag': function (evt) {
      $(document).off('.drag');
    }
  });

  return false;
});

демо: http://jsfiddle.net/sXahK/6/

...