Question

我有一个使用jquery UI的div的可排序列表。它工作正常。

但是，我希望div中的某些图像可以拖动。每次我尝试拖动图像时，div都会保持优先级。可以对可排序的div进行拖动。

好的，所以我想我需要捕捉图像上的mouseenter和mouseleave事件，并在它悬停时暂时禁用可排序的div。这不起作用（也许我没有以正确的方式做到这一点）

有谁知道如何让它发挥作用？

很抱歉，如果之前有人询问，但我搜索时没有找到任何内容。

编辑：花了一点时间找到确切的地方。无论如何这里是当前的可排序代码。

var oldColumn = '';
var systemColumnCounter = $(".systemColumn").length;
$(".systemColumn").sortable({
    /*
    accept-option mit neuer Version von JqueryUI
    */
    accept: '.none',
    placeholder: 'systemElementPlaceHolder',
    connectWith: '.systemColumn',
    dropOnEmpty: true,
    items: 'div.systemElement',
    forceHelperSize: true,
    start: function(event, ui){
        oldColumn = ui.item.parent();
        $("body").myPopup("hideAll");



    },
    sort: function(event, ui){
        $(this).ElementBorderRemove();
        $(".systemElementPlaceHolder").addClass("systemBorderColor");
        $(".systemElementPlaceHolder").height(ui.helper.height());
    },
    stop: function(event, ui){
        var counter = 0;
        var elementBefor = '';
        var elementAfter = '';
        var Item = ui.item;
        var myColumn = Item.parent();

        if(oldColumn.children().length == 0)
        {
            oldColumn.append('<span class="columnEmptyMessage">Column is empty.</span>');
        }

        myColumn.children().each(function(){    
            if($(this).hasClass("columnEmptyMessage") && myColumn.children().length > 1)
            {
                $(this).remove();
            }               

            if($(this).attr("id") == ui.item.attr("id"))
            {
                if(counter > 0)
                {
                    elementBefor = myColumn.children().eq(counter-1).attr("id");
                }

                if(counter < (myColumn.children().length - 1))
                {
                    elementAfter = myColumn.children().eq(counter+1).attr("id");
                }
                return false;
            }
            counter++;
        })

        serialStr = elementBefor + '|' + elementAfter + '|' + myColumn.attr("id") + '|' + ui.item.attr("id");
        if(!ui.item.hasClass("systemNewElement"))
        {
            $.ajax({
                url: "includes/administration.action.php",
                type: "POST",
                data: "action=elementItemSort&items="+serialStr,
                dataType: "html",
                cache: false,
                success: function(data){                    
                    //alert(data);
                },
                error:function(x,e){
                },
                complete: function(data){
                }
            }); 
        }
    }
});

html有几个带有类systemColumn的div，里面的东西是可排序的...这部分有效。

Answer 1

您可能只想考虑将div的一部分（img未包含在其中的部分）作为该div上的唯一位置，您可以使用“handle”选项http://docs.jquery.com/UI/API/1.8/Draggable#option-handle单击以开始排序

您可以让div的左侧有某种“移动”光标图像，以便用户看到它并知道点击那里以移动div来对其进行排序。这样可以消除代码中的复杂性，并消除用户端的混淆。

可以在jquery中进行可排序的draggable

1 个答案: