可拖动到可排序的 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 上唯一可以单击以使用“句柄”选项开始排序的位置http://docs.jquery.com/UI/API/1.8/Draggable#option-handle。

您可以让 div 的左侧有某种“移动”光标图像，以便用户看到它并知道单击该位置以移动 div 以对其进行排序。这消除了代码的复杂性，也消除了用户端的混乱。