我搜索了很多关于使用jQuery单独实现拖放功能的教程(不使用UI),但由于JQuery UI的普及,所有的拖放功能都基于JQuery UI。
有人可以给我一些提示如何使用独立的jQuery实现基本的拖放吗?
有人可以给我一些提示如何使用独立的jQuery实现基本的拖放吗?
有几个插件可以使用,请查看以下内容
http://wayfarerweb.com/jquery/plugins/animadrag/
http://threedubmedia.com/code/event/drag/demo/
它仍然是jQuery,但没有UI
我遇到了同样的问题,对于只需要可拖动和可放置功能的最小化jqueryUI,33.4千字节太大了。下面的方法不是工作代码 - 它只是一个简单的结构来可视化需要发生什么。
$('.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');
}
}
});
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>
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>
我知道这是一个旧帖子,但我也对不使用Jquery UI进行此操作感兴趣。我检查了上面的链接,但我发现这个是最好的选择。它只有8kb的压缩大小(UI sortable大约30kb),并且不依赖于任何巨大的JQuery库(尽管有时候这些库可以使我们的生活更轻松)。