Html Drag And Drop Using JQuery W/out Draggable

Could anyone post a minimalistic example of drag'n'drop imeplementation using jQuery without using draggable behavior? On my understanding it shouldn't be much longer than 10 lines

Solution 1:

I'm assuming that by "without Draggable" you mean without jQuery UI. You could do something like this:

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});  
    } 
});

It's far from perfect but it should be enough to get you started. It won't constrain the dragging to the container for example.

Here's a working example.

Solution 2:

This is how I would do it:

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

demo: http://jsfiddle.net/sXahK/6/