jQuery Sortable 实现label拖动前端

需求类型标签区域和待选去求标签区域的图标可以随意拖动
jQuery sortable实现图标拖动效果下所示：

文章图片

具体代码如下：

需求类型标签：待选需求标签：$("#label_div1,#label_div2").sortable({ cursor: 'move', connectWith: ".connectedSortable", stop: function (event, ui) { /* var show = new Array(); $("#label_div1 label").each(function(){ show.push($(this).attr("id")); }); if(show.length>0){ $("#taskTag").val(JSON.stringify(show)); }else{ $("#taskTag").val(""); }*/ } }).disableSelection(); });

拖动图标到指定位置时期删除的方式，效果图如下：

文章图片
代码如下所示：

产品需求标签: ${item.descr} 标签拖进垃圾桶删除:

$("#label_div,#label_div2").sortable({ cursor: 'move', connectWith: ".connectedSortable", beforeStop: function (event, ui) { var descr = ui.helper[0].innerText; var type = ui.helper[0].id; var $labelDiv2 = $("#label_div2").find("label"); if ($labelDiv2.length > 0) { $labelDiv2.remove(); layer.confirm('你确定删除该标签吗', { skin: "my-skin", btn: ['确定', '取消'], btn1: function (index) { $.ajax({ type: "post", url: path + "/product/deleteProductType", data: { type: type }, dataType: 'json', success: function (data) { if (data.retCode == 1) { layer.msg("删除成功", {icon: 1, time: 500}, function () { $("#" + type).remove(); }); } else { layer.alert("删除失败！" + data.retMsg, {skin: "my-skin", icon: 5}); } } }); layer.close(index); }, btn2: function () { $('#label_div').append('' + descr + ''); } }) } } }).disableSelection();

【jQuery Sortable 实现label拖动】关于jQuery sortable拖动文章