Question

我正在尝试使用sortable进行拖放操作。我左右两个面板。在左侧面板中我有一些可以克隆或没有克隆的拖动元素。我必须将左侧面板元素放在右侧面板中。在这种情况下，我们可以对垃圾元素进行排序。在我的情况下拖放和可排序工作正常但有时它显示不同的行为请参考附加的图像。 Live Demo

<script type="text/javascript">
   var new_id = 20;
 $(document).ready(function () {
        var $gallery = $(".gallery");
        $("li", $gallery).draggable({
            cursor: 'move',
            revert: 'invalid',
            containment: "#area",
            helper: function () {
                //alert($(this).attr('class'));
                var cloned = $(this).clone();
                cloned.attr('id', (++new_id).toString());
                return cloned;
            },
            distance: 20
        });

        $("#trash").droppable({
            tolerance: 'pointer',
            items: "li:not(.editable)",
            accept: function (event, ui) {
                return true;
            },
            drop: function (event, ui) {
                var id = ui.draggable[0].id;
                var color = $(ui.draggable).css("background-color");

                var obj;
                if ($(ui.helper).hasClass('draggable')) {
                    obj = SetDropElementStyle($(ui.helper).clone(), color);
                    $(this).append(obj);
                }

            }
        }).sortable({
            revert: false,
            items: "li:not(.editable)",
            containment: "#trash",
            opacity: 0.6
        });

    });

function SetDropElementStyle(_obj, _color) {
        var imgtype = "";

        var itemWidth = 50;
        if ((_color == "rgb(70, 130, 180)") || (_color == "#4682B4")) {
            $(_obj).find('img').remove();
            var TypeID = $(_obj).attr('typeid');
            imgtype = "R";
            _obj.removeClass('draggable ui-draggable ui-draggable-dragging recipintlist').addClass('flowIn').removeAttr('style');
            if ($.trim(_obj[0].innerText).length > 0) {
                itemWidth = ($.trim(_obj[0].innerText).length + 1) * 10;
            }
            $(_obj).css({ 'width': itemWidth });
            $("[typeid|='" + TypeID + "']").remove();
        }
        if ((_color == "rgb(237, 125, 49)") || (_color == "#ED7D31")) {
            var delayText = "+<span>0</span>h&nbsp;<span>01</span>mn"
            _obj.removeClass('draggable ui-draggable ui-draggable-dragging actionlistDelay').addClass('delay').removeAttr('style');
            imgtype = "D";
            _obj.append(delayText);
        }
        if ((_color == "rgb(186, 56, 56)") || (_color == "#ba3838")) {
            $(_obj).find('span').remove();
            var haltText = "<div style='width:1px;color:white;'>H<br/>A<br/>L<br/>T</div>";
            _obj.removeClass('draggable ui-draggable ui-draggable-dragging actionlistHalt').addClass('halt').removeAttr('style');
            imgtype = "H";
            _obj.append(haltText);
        }


        return _obj;
}
</script>

Jquery拖放具有可排序的Unexpexted行为

0 个答案: