jquery拖拽实例—通过拖拽添加或删除亲测

文章标签: 拖拽
  • :
  • 03-20 11:38
  • :
  • 58次
  • :
  • 0条
  • 0赞

简介本文是jquery里和拖拽相关的一个实例,通过拖拽来添加内容或删除内容。

和大家分享一个和jquery拖拽相关的实例,通过拖拽把网页里的内容添加到收藏夹,并且可以通过拖拽把收藏夹里的内容删除。

先来看HTML结构:

<div draggable="true" class="badge badge-primary p-2">拖拽一</div>
<div draggable="true" class="badge badge-primary p-2">拖拽二</div>
<div draggable="true" class="badge badge-primary p-2">拖拽三</div>
<div draggable="true" class="badge badge-primary p-2">拖拽四</div>
<div draggable="true" class="badge badge-primary p-2">拖拽五</div>

<div id="dest">
    <h2>收藏夹</h2>
</div>
<div id="gb" draggable="false">我是垃圾桶</div>

HTML结构很简单,大家一看就能明白,下面是实现拖拽添加和拖拽删除的具体代码:

$("div.badge").on("dragstart",function(e){
    e.originalEvent.dataTransfer.setData("text/plain",$(e.target).html());
});
$("#dest").on("drop",function(e){
    var text=e.originalEvent.dataTransfer.getData("text/plain");
    var $item=$("<div id='"+$.now()+"'></div>");
    $item.html(text);
    $item.prop("draggable","true");
    $item.on("dragstart",function(e){
        e.originalEvent.dataTransfer.setData("text/plain",$(e.target).attr("id"));
    });
    $item.appendTo($(this));
});            
$("#gb").on("drop",function(e){
    var id=e.originalEvent.dataTransfer.getData("text/plain");
    $("#"+id).remove();
}); 
$("#dest,#gb").on("dragover",function(e){
    //这一句必须加,不加drop事件激发不了
    e.preventDefault();
});

这个实例,好多网站上都有,但都是相同的代码,并且是js写的,站长把改写成jquery格式的了,希望能帮助到你!

这里是具体的在线演示:jquery拖拽实现添加或删除的在线演示



您正在找的文章可能是: