使用基本的 jQuery 框架拖放
Posted
技术标签:
【中文标题】使用基本的 jQuery 框架拖放【英文标题】:Drag and drop using basic jQuery framework 【发布时间】:2012-03-23 19:43:42 【问题描述】:是否可以使用基本的jQuery脚本(不使用jQuery UI)实现拖放?
【问题讨论】:
【参考方案1】:在 html5 中,有一个名为“可拖动”的属性。
<div draggable='true'>Drag me</div>
<div id='dropzone'>Drop it here!</div>
您可以利用以下事件:
var onDragEnter = function(event)
event.preventDefault();
$("#dropzone").addClass("dragover");
,
onDragOver = function(event)
event.preventDefault();
if(!$("#dropzone").hasClass("dragover"))
$("#dropzone").addClass("dragover");
,
onDragLeave = function(event)
event.preventDefault();
$("#dropzone").removeClass("dragover");
,
onDrop = function(event)
event.preventDefault();
$("#dropzone").removeClass("dragover");
console.log(event.originalEvent.dataTransfer.files);
;
$("#dropzone")
.on("dragenter", onDragEnter)
.on("dragover", onDragOver)
.on("dragleave", onDragLeave)
.on("drop", onDrop);
希望暂时能有所帮助。
【讨论】:
以上是关于使用基本的 jQuery 框架拖放的主要内容,如果未能解决你的问题,请参考以下文章