Question

我目前正在开发一种拖放＆＃34;彩票＆＃34;使用jQuery，其中contestent已经有大约15个项目，他可以选择其中的3个并将其拖入行李箱中，在他删除这3个项目后，弹出一个表单并且用户可以输入他的详细信息。在那一步之前，一切正常。但我想用一个jQuery插件从＆＃34;行李箱＆＃34; -div中创建一张图片。这也很好，但由于元素只是在屏幕上移动，jQuery添加了一个名为＆＃34;删除＆＃34; （当他们被丢弃时）他们基本上仍然留在＆＃34;项目＆＃34; -div。因此，当我从那个行李箱中创建一个图像时，只需要下载行李箱，而不会丢弃物品。

我该如何解决这个问题？

＆＃13;

$(function() {
        $("#items img").draggable({});
        
        $("#suitcase").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function(event, ui) {
                if ($('.dropped').length > 2) {
                    $('#form').fadeToggle();
                    return false;
                }
                if ($('.dropped').length == 2) $('#form').fadeIn("fast");
                if (ui.draggable.is('.dropped')) return false;
                // $(this).find(".placeholder").remove();
                ui.draggable.addClass('dropped');
    
                /*$("<span></span>").html(ui.draggable.html()).appendTo(this).draggable( {
                    appendTo: "body",
                    helper: "clone"
                }).addClass('dropped');*/
            },
            out: function(event, ui) {
                if (ui.draggable.hasClass('dropped')) {
                    ui.draggable.removeClass('dropped');
                }
            }
        }).sortable({
            items: "span:not(.placeholder)",
            sort: function() {
                $(this).removeClass("ui-state-default");
            }
        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="items">
        <img width="15%" data-item-name="Item 1" src="images/household/household-items-26091891_01.gif" />
        <img width="15%" data-item-name="Item 2" src="images/household/household-items-26091891_02.gif" />
        <img width="15%" data-item-name="Item 3" src="images/household/household-items-26091891_03.gif" />
        <img width="15%" data-item-name="Item 4" src="images/household/household-items-26091891_04.gif" />
        <img width="15%" data-item-name="Item 5" src="images/household/household-items-26091891_05.gif" />
    </div>
    
    <div id="suitcase"></div>

＆＃13;

jQuery draggable / droppable问题？

0 个答案: