1

这是我的页面的链接。我在使用 jQuery UI 拖放功能时遇到问题。我需要它能够将多个相同的项目拖到它旁边的容器中，并且我需要对它们进行重新排序。

到目前为止，它允许我按照我在代码中设置的方式拖放 3，但问题是当我将其他任何内容拖入框中并尝试重新排序列表时，我试图将当前列表项拖动到重复本身直到有3 在它允许我重新排序之前。除非我从左侧的容器中拖动，否则对防止重复有什么帮助吗？

这是我的 HTML：

<div id="products" class="column large-4 row">
    <h1 class="ui-widget-header">Drag hiring steps to the box on the right.</h1>
    <div class="ui-widget-content">
        <ul>
            <li data-id="1"><span>Phone Interview</span></li>
            <li data-id="2"><span>In-Person Interview</span></li>
            <li data-id="3"><span>Technical Test</span></li>
            <li data-id="4"><span>Personality Test</span></li>
            <li data-id="5"><span>Background Check</span></li>
            <li data-id="6"><span>Drug Test</span></li>
            <li data-id="7"><span contenteditable>Custom Addition</span></li>
        </ul>
    </div>
</div>
<div id="shoppingCart1" class="shoppingCart column large-6 push-1">
    <h1 class="ui-widget-header">Drag &amp; drop steps to reorder the hiring process.</h1>
    <div class="ui-widget-content">
        <ol>

        </ol>
    </div>
</div>

这是我的 JS：

var $start_counter = $( "#event-start" ),
$drag_counter = $( "#event-drag" ),
$stop_counter = $( "#event-stop" ),
counts = [ 0, 0, 0 ];
$("#products li").draggable({
    appendTo: "body",
    helper: "clone",
    cursor: "url(grab.cur), url(img/hand.png), auto",
    start: function() {
        var dd = $(this).text();
        console.log( dd + ' is dragging');
    }
});

$(".shoppingCart ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        var self = $(this);
        self.find(".placeholder").remove();
        var productid = ui.draggable.attr("data-id");
        if (self.find("[data-id=" + productid + "]").length == 3) return;

        $("<li></li>", {
            "text": ui.draggable.text(),
            "data-id": productid,
            "class": 'editable'
        }).appendTo(this);

        $("<span></span>", {
            "class": 'close pull-2'
        }).appendTo('.editable');

        $('.ui-droppable li').wrapInner('<span class="white"> </span>');

        // To remove item from other shopping chart do this
        var cartid = self.closest('.shoppingCart').attr('id');
        $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
    var removeMom = function(el) {
        el.on('click', function() {
            var closeBtn = $(this).parents('.editable');
            closeBtn.slideUp(200, function() { $(this).remove();} );
        })

    }

    $('.ui-draggable, .editable').each(
        function() {
            handTrick( $(this) );
        }
    );

    $('.close').each(
        function() {
            removeMom( $(this) );
        }
    );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
    $(this).removeClass("ui-state-default");
}
});

var removeMom = function(el) {
el.on('click', function() {
    var closeBtn = $(this).parents('.editable');
    closeBtn.remove();
})

}

var handTrick = function(el) {
el.on('mouseover', function() {
    $(this).css({cursor: "pointer"});
});
el.on('mouseoout', function() {
    $(this).css({cursor: "auto"});
});
el.on('mousedown', function() {
    $(this).css({cursor: "url(grab.cur), url(img/hand.png), auto"});
});
el.on('mouseup', function() {
    $(this).css({cursor: "pointer"});
});

}

$('.close').each(
function() {
    removeMom( $(this) );
}
);

$('.ui-draggable').each(
function() {
    handTrick( $(this) );
}
);

var yy = $('.ui-widget-content').height();
$('.ui-droppable').css('min-height', yy);

当您转到页面时，您可以自己查看 CSS。我希望有人能帮帮忙！

4

1 回答 1

0

找到了解决方案。我不得不将 drop 包装在一个条件中。它仍然允许我放入容器中，而在容器内拖动时，每个项目都无法复制自身。

if(!ui.draggable.hasClass('editable')){
        var self = $(this);
        var productid = ui.draggable.attr("data-id");
        if (self.find("[data-id=" + productid + "]").length == 9) return;

        $("<li></li>", {
            "text": ui.draggable.text(),
            "data-id": productid,
            "class": 'editable',
        }).appendTo(this);
        $("<span></span>", {
            "class": 'close pull-2'
        }).appendTo('.editable');
        $('.ui-droppable li').wrapInner('<span class="white"> </span>');

        var cartid = self.closest('.shoppingCart').attr('id');
        $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();



        var removeMom = function(el) {
            el.on('click', function() {
                var closeBtn = $(this).parents('.editable');
                closeBtn.slideUp(200, function() { $(this).remove();} );
            })

        }

        $('.ui-draggable, .editable').each(
            function() {
                handTrick( $(this) );
            }
        );

        $('.close').each(
            function() {
                removeMom( $(this) );
            }
        );
}
于 2013-04-26T16:26:40.753 回答