Question

我将元素从一个div拖到另一个div而拖动元素不可见

我使用jquery mCustomScrollbar插件滚动

HTML代码

<table><tr>
    <td><div id="ParentDiv" class="mCustomScrollbar _mCS_4 ui-sortable ui-droppable"></div></td>
<td><div style="border:1px solid blue;float:left;margin-top:0px;" class="drop">DROP HERE
    </div></td></tr>
    </table>

JQuery代码

for (var i = 0; i < 100; i++) {
    var el = "<div class='childDiv draggable'>iData " + i + "</div>";
    $("#ParentDiv").append(el);
}

$(".draggable").draggable({
    containment: "window",
    cursor: "crosshair",
    revert: "invalid",
    scroll: true,
    stop: function (event, ui) {
        if ($(this).hasClass("tsh")) {
            $(this).attr("style", "");

        }
    },
    drag: function (event, ui) {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
      //  $(this).text('x: ' + xPos + 'y: ' + yPos);
        var shw_xy = 'x: ' + xPos + 'y: ' + yPos;
        console.log(shw_xy);


    }

});
$(".drop").droppable({
    accept: ".draggable",
    activeClass: "myhighlight",
    drop: function (event, ui) {
 $(this).removeClass("border").removeClass("over");
                    //$(this).addClass("over");
                    var dropped = ui.draggable;
                    var droppedOn = $(this);


                    $(dropped).detach().css({
                        top: 0,
                        left: 0
                    }).appendTo(droppedOn);
    },
    over: function (event, elem) {
        $(this).addClass("over");
        $(this).removeClass("img_added");

        var $this = $(this);

        console.log("over");

    },
    activate: function (event, elem) {

    }
});

CSS

#ParentDiv {
    background-color: #ffffff;
    border: 1px solid #e1d193;
    border-radius: 4px;
    float: left;
    height: 600px;
    margin-bottom: 10px;
    margin-left: 15px;
    min-height: 200px;

    padding-bottom: 20px;
    padding-left: 23px;
    padding-top: 20px;
    width: 252px;
}
#ParentDiv .childDiv {
    border:1px solid red;
    border-radius: 4px;
    height: auto;
    margin: 2px;
    position: relative;
    z-index: 5000;
}
#ParentDiv .childDiv {
    float: left;
    height: auto;
    width: 70px;
}
.childDiv {
    border:1px solid green;
    border-radius: 4px;
    height: auto;
    margin: 2px;
    position: relative;
    z-index: 5000;
}
 .childDiv {
    float: left;
    height: auto;
    width: 70px;
    margin:2px;
}

任何人都可以建议我错在哪里

Answer 1

请使用helper：“clone”和appendTo函数。请查看以下代码。

$(".element").draggable({
    helper: function () { return $
        (this).clone().appendTo(".element").css("zIndex",2).show();
    }
});

Answer 2

我提到带有拖动元素的容器有隐藏溢出。这就是为什么你看不到阻力元素的原因。只需在拖动开始时将其设置为可见，并在拖动结束时将其设置为隐藏：

List<Item> r = getGroups(items).stream().map(Item::collapse).collect(toList());

请在此处查看其工作原理：

http://jsfiddle.net/jt1c8o81/19/

启用mCustomScrollbar时如何将元素拖动到外部

2 个答案: