使用 jquery 可拖动到可排序的内部

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 对其进行排序。这消除了代码的复杂性，也消除了用户端的混乱。