jquery UI-能够将draggable移动到错误的排序表中

我有一个我指定连接到可排序的

.sectionList

的拖动表，但是它也连接到另一个可排序的

.questionList

。我很确定我以前做过这件事，但我不知道出了什么问题

小提琴：

全屏小提琴：

HTML（去掉了很多东西）：

拖动以创建新的部分或新问题：
新章节
新问题



fsdf


fsdfd


fdsfd


fdsf




ffsd


fdsf


fsdfd


fdsf


fdsd

javascript:

// draggable new question
$('.draggableNewQuestion').draggable({
    cursor: "move",
    helper: "clone",
    revert: "invalid",
    appendTo: "body",
    connectToSortable: ".questionList"
});

// draggable new section
$('.draggableNewSection').draggable({
    cursor: "move",
    helper: "clone",
    revert: "invalid",
    appendTo: "body",
    connectToSortable: ".sectionList"
});

// sortable list(s) of questions (dragged question target)
makeQuestionListsSortable();

// sortable list(s) of sections (dragged sections target)
$('.sectionList').sortable({
    cursor:"move",
    items: "li",
    receive: function(event,ui) {
        $('#newSection').fadeIn();
        $('#fade').fadeIn();
        $('#newName').focus();
    },
    update : function(event,ui) {
        // replace 2nd instance of draggable new section, the one that was just dragged down
        $('.draggableNewSection').eq(1).replaceWith('<li id="insertedNewSection" class="sectionBox">New Section</li>');

        var newIndex = $('.sectionBox').index($('#insertedNewSection'));
        //console.log('current position of new item'+(newIndex+1));        
    }
});


/* makes all questionLists sortable ********************************************/
function makeQuestionListsSortable() {
    $('.questionList').sortable({
        connectWith: ".questionList",
        cursor: "move",
        start: function (event,ui) {
            $(ui.draggable).css('left','auto');
        },
        receive: function(event, ui) {
            // if its not coming from another questionList its a new question
            if (!ui.sender.context.classList.contains('questionList')) {
                $('#newQuestion').fadeIn();
                $('#fade').fadeIn();
                $('#newLabel').focus();
            }
        },
        update : function(event,ui) {
            // replace 2nd instance of draggable new question, the one that was just dragged down
            $('.draggableNewQuestion').eq(1).replaceWith('<li id="insertedNewQuestion" class="questionBox">New Question</li>');
        }
    });
}

//可拖动的新问题
$（'.draggableNewQuestion'）。draggable({
光标：“移动”，
助手：“克隆”，
回复：“无效”，
附：“身体”，
connectToSortable:“.questionList”
});
//可拖动的新区段
$（'.DragableNewSection'）。可拖动({
光标：“移动”，
助手：“克隆”，
回复：“无效”，
附：“身体”，
connectToSortable:“.sectionList”
});
//问题的可排序列表（拖动的问题目标）
makeQuestionListsSortable（）；
//节的可排序列表（拖动的节目标）
$（'.sectionList'）。可排序({
光标：“移动”，
物品：“李”，
接收：功能（事件、用户界面）{
$（'#newSection'）.fadeIn（）；
$（'fade'）.fadeIn（）；
$（'#newName'）.focus（）；
},
更新：功能（事件、用户界面）{
//替换可拖动新部分的第二个实例，即刚刚向下拖动的部分
$（'.DragableNewSection'）.eq（1）.替换为（'
新节“
”）；
var newIndex=$（'.sectionBox'）。index（$（'#insertedNewSection'））；
//console.log（'新项的当前位置'+（newIndex+1））；
}
});
/*使所有问题列表可排序********************************************/
函数makeQuestionListsSortable（）{
$（'.questionList'）。可排序({
连接：“.questionList”，
光标：“移动”，
开始：功能（事件、用户界面）{
$（ui.draggable）.css（'left'，'auto'）；
},
接收：功能（事件、用户界面）{
//如果它不是来自另一个问题列表，那么它是一个新问题
如果（！ui.sender.context.classList.contains（'questionList'））{
$（'#newQuestion'）.fadeIn（）；
$（'fade'）.fadeIn（）；
$（'#newLabel'）.focus（）；
}
},
更新：功能（事件、用户界面）{
//替换可拖动新问题的第二个实例，即刚刚向下拖动的问题
$（'.draggableNewQuestion'）.eq（1）.替换为（'
newquestion
）；
}
});
}

将

项目

选择器更改为

>li

，这样它只选择即时

项目

// sortable list(s) of sections (dragged sections target)
$('.sectionList').sortable({
    cursor:"move",
    items: "> li",
    receive: function(event,ui) {
    $('#newSection').fadeIn();
    $('#fade').fadeIn();
    $('#newName').focus();
    },

您在
中嵌套了
.questionsList
。selectionList
因此它将同时拾取可排序的
li
子项


// sortable list(s) of sections (dragged sections target)
$('.sectionList').sortable({
    cursor:"move",
    items: "> li",
    receive: function(event,ui) {
    $('#newSection').fadeIn();
    $('#fade').fadeIn();
    $('#newName').focus();
    },