[英]Drag and drop without JQuery UI
我经常搜索一下jQuery的拖放教程(没有UI),但由于JQuery UI的普及,所有的拖放功能都基于JQuery UI。
任何人都可以给我一个提示如何通过JQuery独立进行基本的拖放操作?
您可以使用几个插件来查看以下内容
http://wayfarerweb.com/jquery/plugins/animadrag/
http://threedubmedia.com/code/event/drag/demo/
它仍然是jquery但没有UI
我认为一个好的起点可能是制定流程,然后决定每个用户操作需要使用哪些jQuery工具。
所以用户进程可能是:
需要以下类型的事件侦听器:
至少。 另一种选择可能是检查jQuery UI源,看看他们是如何做到的! 这将告诉你究竟该做什么,但你可以添加到它或必要时修剪。
http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery
看到这个。 它是核心JS,易于实现。
我发现这个非常有用: http : //draggabilly.desandro.com/
遇到同样的问题,33.4千字节的缩小jqueryUI只有draggable和droppable对于我需要的有限功能来说太大了。 下面的方法不是工作代码 - 它只是一个简单的结构,可视化需要发生的事情。
$('.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');
}
}
});
我知道这是一篇旧帖子,但我也有兴趣在没有Jquery UI的情况下这样做。 我检查了上面的链接, 但我发现这是最好的 。 它只有8kb缩小(UI可排序~30,我读过),并且独立于任何庞大的JQuery库(尽管这些可以使我们的生活更轻松)。
答案基于: https : //www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui
排序或许请参阅: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.