jquery拖拽实例:让一张图片在两个DIV里来回拖拽亲测 原创

文章标签: 图片特效
  • :
  • 03-19 10:32
  • :
  • 18次
  • :
  • 0条
  • 1赞

简介本文讲的是jquery的一个拖拽实例,可以让一张图片在网页的两个DIV容器里来回拖拽,并附有完整的在线实例演示。

来和大家分享一个关于jquery拖拽的实例,实例很简单,并且可能在我们日常的web开发中也没啥用,但目的就是为了通过这些简单的实例,来掌握和学习jquery里关于拖拽的方法和技巧。

先来看实例的HTML结构:

<div id="drop1">
    <img id="drag" draggable="true" src="/Images/logo.svg" width="60">
</div>
<div id="drop2" class="col ml-1">
  
</div>

HTML很简单,就是两个DIV容器,和一个图片,我们要做的就是让图片可以在两个DIV容器里来回拖拽:

<script language="javascript">
$("#drag").on("dragstart",function(e){
    e.originalEvent.dataTransfer.setData("Text",e.target.id);
});
$("#drop1,#drop2")
.on("dragover",function(e){
    //这一句必须加,不加drop事件激发不了
    e.preventDefault();
})
.on("drop",function(e){
    var data=e.originalEvent.dataTransfer.getData("Text");
    $(e.target).append($("#"+data)).addClass("d_hover").siblings(".d_hover").removeClass("d_hover");
    e.preventDefault();	
});
//本文首发 爱jQuery www.aijquery.cn
</script>

代码就是这么简单,也很都好理解,这里是具体的在线演示:jquery拖拽—让一张图片在两个DIV间来回拖放的在线演示



您正在找的文章可能是: