Question

我有两个连接的可排序列表。为了我的问题，当我开始将项目从＃sortable1拖到＃sortable2时，在开始事件中我要取消/禁用/删除＃sortable2

什么都没有用？

$("#sortable1, #sortable2").sortable({
    connectWith: "#sortable1, #sortable2", 
    start: startDrag
});

function startDrag(event, ui) {
    $("#sortable2").css("opacity","0.5");

    // $("#sortable2").sortable("cancel"); // goes whooooo
    /* docs say:
    If the sortable item is being moved from one connected sortable to another:
    $(ui.sender).sortable('cancel');
    will cancel the change. Useful in the 'receive' callback. 
    */
    // $("#sortable1").sortable("cancel"); // I only want to cancel dropping in sortable2...
    // $("#sortable2").sortable("disable"); // disables only after the drop event
    // $("#sortable2").sortable("destroy"); // same as "disable"
}
function stopDrag(event, ui) {
    $("#sortable2").css("opacity","1.0");
    // $("#sortable2").sortable("enable");
}

我的JSFiddle：http://jsfiddle.net/tunafish/m32XW/

我发现了另外两个像我一样的问题：
jQuery sortable('disable') from start event not entirely working like expected
http://forum.jquery.com/topic/disable-a-sortable-while-dragging-with-connectedlists

没有回复.. 任何赞赏的东西！

编辑：我还试图在可排序的上覆盖像模态的div，但仍然可以拖到那个方向。唯一有用的是显示/隐藏，但这对我来说不是一个选择。

Answer 1

好的，这是我的应用程序;两个图像列表，可排序，您可以从连接列表中复制如果目标中已存在某个项目，则该项目已被禁用希望对某人有用......

JSFiffle：http://jsfiddle.net/tunafish/VBG5V/

CSS：

.page { width: 410px; padding: 20px; margin: 0 auto; background: darkgray; }
.album { list-style: none; overflow: hidden; 
    width: 410px; margin: 0; padding: 0; padding-top: 5px;
    background: gray; 
} 
.listing { margin-bottom: 10px; }
.album li { float: left; outline: none;
    width: 120px; height: 80px; margin: 0 0 5px 5px; padding: 5px;
    background: #222222;
 }
li.placeholder { background: lightgray; }

JS：

$("ul, li").disableSelection();

$(".album, .favorites").sortable({
    connectWith: ".album, .favorites",
    placeholder: "placeholder", 
    forcePlaceholderSize: true, 
    revert: 300,
    helper: "clone",
    stop: uiStop,
    receive: uiReceive,
    over: uiOver
});


$(".album li").mousedown(mStart);

var iSender, iTarget, iIndex, iId, iSrc, iCopy;
var overCount = 0;

/* everything starts here */
function mStart() {
    // remove any remaining .copy classes
    $(iSender + " li").removeClass("copy");

    // set vars
    if ($(this).parent().hasClass("listing")) { iSender = ".listing"; iTarget = ".favorites"; } 
    else { iSender = ".favorites"; iTarget = ".listing"; }
    iIndex  = $(this).index();
    iId     = $(this).attr("id");
    iSrc    = $(this).find("img").attr("src");  
    iCopy   = $(iTarget + " li img[src*='" + iSrc + "']").length > 0; // boolean, true if there is allready a copy in the target list   

    // disable target if item is allready in there  
    if (iCopy) { $(iTarget).css("opacity","0.5").sortable("disable"); }
}

/* when sorting has stopped */
function uiStop(event, ui) {
    // enable target
    $(iTarget).css("opacity","1.0").sortable("enable");

    // reset item vars
    iSender = iTarget = iIndex = iId = iSrc = iCopy = undefined;
    overCount = 0;

    // reinit mousedown, live() did not work to disable
    $(".album li").mousedown(mStart);
}

/* rolling over the receiver - over, out, over etc. */
function uiOver(event, ui) {
    // only if item in not allready in the target
    if (!iCopy) {                   
        // counter for over/out (numbers even/uneven)
        overCount++;
        // if even [over], clone to original index in sender, show and fadein (sortables hides it)
        if (overCount%2) {
            if (iIndex == 0) { ui.item.clone().addClass("copy").attr("id", iId).prependTo(iSender).fadeIn("slow"); } 
            else { ui.item.clone().addClass("copy").attr("id", iId).insertAfter(iSender + " li:eq(" + iIndex + ")").fadeIn("slow"); }
        } 
        // else uneven [out], remove copies
        else { $(iSender + " li.copy").remove(); }
    } 
    // else whoooooo
}

/* list transfers, fix ID's here */
function uiReceive(event, ui) {
    (iTarget == ".favorites") ? liPrefix = "fli-" : liPrefix = "lli-";  
    // set ID with index for each matched element
    $(iTarget + " li").each(function(index) {
        $(this).attr("id", liPrefix + (index + 1)); // id's start from 1
    });
}

HTML：

<div class="page">

    <div class="container">
        <h2>Photo Album</h2>
        <ul class="listing album">
            <li id="li-1"><img src="tn/001.jpg" /></li>
            <li id="li-2"><img src="tn/002.jpg" /></li>
            <li id="li-3"><img src="tn/003.jpg" /></li>
            <li id="li-4"><img src="tn/004.jpg" /></li>
            <li id="li-5"><img src="tn/005.jpg" /></li>
        </ul>
    </div>

    <div style="clear:both;"></div>

    <div class="container">
        <h2>Favorites</h2>
        <ul class="favorites album">
            <li id="fli-1"><img src="tn/001.jpg" /></li>
            <li id="fli-2"><img src="tn/002.jpg" /></li>
            <li id="fli-3"><img src="tn/010.jpg" /></li>
        </ul>
    </div>

</div>

Answer 2

/* docs say:
If the sortable item is being moved from one connected sortable to another:
$(ui.sender).sortable('cancel');
will cancel the change. Useful in the 'receive' callback. 
*/

这段代码是我花了30分钟寻找的！

Answer 3

好的，我发现了某种黑客攻击。
当一个项目从＃sortable1移动到＃sortable2时，当拖到＃sortable2时，会有一个列表项添加了类.placeholder 所以在UI的over事件中我做了

$("#sortable2 li.placeholder").hide();

然后使用UI的stop事件

重新设置它

$("#sortable2 li.placeholder").show();

这仅适用于视觉效果..项目仍会移至＃sortable2，因此您需要remove()。要模仿复制，您需要在＃sortable2中添加clone()。您可以在UI的index()事件中获取原始start，而不是使用insertAfter(id - 1)

目前我只能在用户界面的receive事件中进行克隆，我更喜欢用户界面的over，但无法让它发挥作用..

jquery ui连接sortables：取消，禁用，销毁... nada

3 个答案: