javascript - 无法在 jquery ui 中拖动整个 body

Question

当我想拖动大尺寸元素时，我的问题就开始了，我无法将这些元素拖到全身，我使用的是 bootstrap 3.3.7 和 JQueryUI这是我的问题的一个例子:

这只发生在大尺寸元素上，

here's an example of code:

$('body .removable').draggable({
        cursor: 'move',
        helper: 'clone',
        appendTo: 'body',
        containment: 'window',
        //revert: true,
        //stack: "#fields-drop-area",
        zIndex: 101,
        drag: function (event, ui) {
            $("#trash").removeClass("hidden");
            $(ui.helper).css({ 'width': "12%", "height": "40px",'overflow':'hidden' });
        },
        stop: function (event, ui) {
            $("#trash").addClass("hidden");
            $(ui.helper).css('width', "18%");
        }
    });

the trash droppable code:

    $('body #trash').droppable({
    accept: '.removable,.btn-removable',
    hoverClass: 'over-area',
    forceHelperSize: true,
    drop: function (event, ui) {
        debugger;
        document.getElementById('recycle').play();
        var id;
        if (ui.helper.hasClass("dropped-tab")) {
            id = ui.helper.data("id");
            if (ui.helper.hasClass("tab-parent")) {
                $(ui.helper).hide('explode', null, 500, function () { $(ui.draggable.closest('.panel')).remove(); });
                updateTabForm(null, objState.Deleted, id);
            } else if (ui.helper.hasClass("tab-sub")) {
                updateTabForm(id, objState.Deleted, null);
                $(ui.helper).hide('explode', null, 500, function () { ui.draggable.remove(); });
            }
        } else if (ui.helper.hasClass("dropped-field")) {
            id = ui.helper.find('div.panel-heading>label').data('fieldid');
            updateFieldForm(id, objState.Deleted, ui);
            $(ui.helper).hide('explode', null, 500, function () { ui.draggable.remove(); });
        }
        if (ui.draggable.hasClass('btn-success')) {
            $('#fields-drop-area').html('');
        }
    }
});

here's the css:

.full-height-page, .full-height-page body {
    height: 100%;
    min-height: 100%;
    /* this is necessary */
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

    @media (min-width: 768px) {
        .grid-divider {
            position: relative;
            padding: 0;
        }

            .grid-divider > [class*='col-'] {
                position: static;
            }

                .grid-divider > [class*='col-']:nth-child(n+2):before {
                    content: "";
                    border-left: 1px solid #DDD;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                }

        .col-padding {
            padding: 0 15px;

    .ui-state-highlight {
        height: 1.5em;
        line-height: 1.2em;
    }

    .body-content #trash {
        width: 20%;
        height: 30%;
        background-color: #f9f9f9;
        content: "sssss";
        position: absolute;
        z-index: 100;
        bottom: 0;
        right: 2%;
        text-align: center;
        border-radius: 8px;
        border: 3px solid #bbf3bf;
    }

here's my Html code:

<div class="row grid-divider">
    <div id="trash" class="hidden">
        <h2>Through Items Here</h2>
        <i class="fa fa-5x fa-trash-o  faa-bounce animated"></i>
    </div>
    <div class="col-md-4" id="tools-container">
        <h4 class="container-title text-center">
            <strong>Toolbox</strong>
        </h4>
        <hr/>
        <div id="tools-container-body" class="height-600"></div>
    </div>
    <div class="col-md-4" id="tabs-container">
        <h4 class="container-title text-center">
            <strong>Tabs</strong>
        </h4>
        <hr/>
        <div class="height-600" id="tabs-drop-area"></div>
    </div>
    <div class="col-md-4" id="fields-container">
        <h4 class="container-title text-center">
            <strong>Fields</strong>
        </h4>
        <hr/>
        <div class="height-600" id="fields-drop-area"></div>
    </div>
</div>

在我移除容器后它可以工作，但我不能丢进垃圾箱

Answer 1

如果没有您的 HTML，我只能猜测问题与您对以下内容的使用有关:

containment: 'window',

将其更改为:

containment: 'body',

您应该可以拖动整个页面。您也可以尝试删除“包含”选项，因为如果您希望能够在整个屏幕上拖动，则不需要它。

您还需要添加 jquery-ui droppable 来处理丢入垃圾箱的操作。我没有在你提供的代码中看到代码，所以试试这个:

$('#trash').droppable({
  over: function (event, ui) {
    //do nothing        
    },
 drop: function (event, ui) {
    console.log("item dropped, handle it");
    }
})