Drag and drop without JQuery UI
Solution 1
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.
Solution 2
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
Solution 3
http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery
See this. It's core JS and easy to implement.
Solution 4
I found this one very useful: http://draggabilly.desandro.com/
Solution 5
Answer based on: https://www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui
for sorting perhaps see: 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>
Constrain movement
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>
Comments
-
Googlebot about 4 years
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?
-
Googlebot about 12 yearsThanks for shedding light on the process. It will be helpful!
-
Yousef Salimpour over 10 yearsreally? seems to be working for me! here's the repo though: github.com/desandro/draggabilly
-
knutole over 10 yearsyeah still dead, no response, for me - but thanks for the new link.
-
Stephen about 8 yearsYou acutally don't need the jqueryui css file for drag/drop - so just the minified js is ~ 12k