- 需求類型標籤區域和待選去求標籤區域的圖標可以隨意拖動
jQuery sortable實現圖標拖動效果下所示:
具體代碼如下:
<div class="form-group">
<label class="col-md-2" for="label_div1">需求類型標籤:</label>
<div id="label_div1" class="connectedSortable" ondrop="drop(event)"
ondragover="allowDrop(event)" aria-placeholder="待選需求標籤拖動於此"></div>
</div>
<div class="form-group">
<label class="col-md-2" for="label_div2">待選需求標籤:</label>
<div id="label_div2" class="connectedSortable" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
</div>
$("#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();
});
- 拖動圖標到指定位置時期刪除的方式,效果圖如下:
代碼如下所示:
<div class="form-group">
<label for="label_div" class="col-sm-2">產品需求標籤:</label>
<div id="label_div" class="connectedSortable" >
<c:if test="${not empty productTypes}">
<c:forEach items="${productTypes}" var="item">
<label
style="border-color: #E86422; color: #E86422;"
id="${item.type}">${item.descr}<span
class="glyphicon glyphicon-trash"></span></label>
</c:forEach>
</c:if>
</div>
</div>
<div class="form-group">
<label for="label_div2" class="col-sm-3">標籤拖進垃圾桶刪除:</label>
<div class="col-md-offset-3">
<div id="label_div2" class="connectedSortable "
style=" display:inline-block !important;width: auto; height: auto;" ondrop="drop(event)"
ondragover="allowDrop(event)">
<i style="color: #858585;" class="icon-trash icon-7x"></i>
</div>
</div>
</div>
$("#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('<label\n' +
' style="border-color: #E86422; color: #E86422;"\n' +
' id=\'' + type + '\'>' + descr + '<span\n' +
' class="glyphicon glyphicon-trash"></span></label>');
}
})
}
}
}).disableSelection();