Drag and drop without JQuery UI

Question

I searched a lot to find a tutorial for drag & drop with jQuery alone (without UI), but due to the popularity of JQuery UI, all drag and drop features are based on JQuery UI.

Can anyone give me a hint how to make a basic Drag & Drop by JQuery standalone?

Answer 1

I understand this is an old post, but i was also interested in doing this without Jquery UI. I checked the links above, but i found this to be the best. It's only 8kb minified (UI sortable ~30, i've read), and is independent of any mammoth JQuery library (although those CAN make our lives easier sometimes).

Answer 2

Came across the same problem, and 33.4 kilobytes for the minified jqueryUI with only draggable and droppable is too large for the limited functionality I needed. The approach below isn't working code - it's just a simple structure to visualize what needs to happen.

$('.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 3

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

See this. It's core JS and easy to implement.

Answer 4

There are several plugins that you may use take a look at the following

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

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

it still jquery but no UI

Answer 5

I found this one very useful: http://draggabilly.desandro.com/

Answer 6

I think a good starting place might be to map out the process, and then decide which jQuery tools you will need to use for each user action.

so the user process might be:

• Click on your content div on a "draggable" area
• Drag the content, which will keep the content inside that div
• release the mouse, which will put the content into a "droppable" container, which will adjust the size of the previous content to fit the droppable size

which needs the following types of event listeners:

• mouseup
• mousedown
• animate

At the very least. Another option might be to check out the jQuery UI source, and see how they do it! Which will tell you exactly what to do but you can add to it or trim where necessary.