jQuery Sortable 实现label拖动

1. 需求类型标签区域和待选去求标签区域的图标可以随意拖动
   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();
    });

2. 拖动图标到指定位置时期删除的方式，效果图如下：
   代码如下所示：

<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();

关于jQuery sortable拖动文章