Question

我有jQuery Ui可拖动元素的样式问题。在这里我有什么

正如你所看到的，我有两个可放置的区域，每个区域中的元素都是可拖动的，并且可以将元素从一个块拖放到另一个块这里唯一的问题是，当我将元素从顶部块拖动到下面的块时，拖动元素在droppable下面是元素，但是当我从底部拖动到顶部时没有这样的问题。

以下是拖动代码

$(".slide").draggable({
    // brings the item back to its place when dragging is over
    revert:true,
    // once the dragging starts, we decrease the opactiy of other items
    // Appending a class as we do that with CSS
    start: function(event, ui) { $(this).css("z-index", a++); },
    drag:function () {
        $(this).removeClass('droped');
    },
    // adding the CSS classes once dragging is over.
    stop:function () {
        $(this).addClass('droped');
    },
    zIndex: 10000,
    snapMode: "inner"
});

任何人都可以帮助我，我已经工作了2天了，无法弄清楚是什么问题，我试图改变每个街区的z-index位置，但没有结果;

Answer 1

我发现我的代码只在第一次工作 - 我从你的JQuery和你的css中删除了一些z索引，现在它每次都在为我工作：

http://jsfiddle.net/zbo7g5nz/5/

我的jFiddle似乎没有更新分享..这是工作代码：

$(".slide").draggable({
        // brings the item back to its place when dragging is over
        revert:true,
        // once the dragging starts, we decrease the opactiy of other items
        // Appending a class as we do that with CSS
        start: function(event, ui) { $(this).css("z-index", a++); },
        drag:function () {
            $(this).parent().css('z-index', '10001');
            $(this).removeClass('droped');
        },
        // removing the CSS classes once dragging is over.
        stop:function () {
            $(this).parent().css('z-index', '10001');
            $(this).addClass('droped');
        },
        zIndex: 10000,
        snapMode: "inner"
    });

我为ul提供了一个z-index，其li高于下面列表的li。

Answer 2

为了进一步兼容，请避免使用div并使用div而不是UL或LI。

此外，您无需侦听start事件来设置z-index属性。由于这个原因，.draggable（）api公开了zIndex prop。

Here is the demo working:

http://jsfiddle.net/zbo7g5nz/8/

jQuery ui draggable元素得到其他可拖动元素

2 个答案: