jquery UI - 能够将可拖动移动到错误的可排序中

Question

我有一个可拖动的对象，我指定它连接到可排序的.sectionList，但它也连接到另一个可排序的.questionList。我很确定我以前有这个工作，但不知道出了什么问题。

小提琴：http://jsfiddle.net/sEwhr/4/

全屏小提琴：http://jsfiddle.net/sEwhr/4/embedded/result/

HTML（去掉了很多东西）：

<span id="j_id0:j_id11"></span><span id="j_id0:j_id37"><span id="j_id0:j_id40">
<div id="topContent">  

  <div class="dragSection">
    <h3>Drag to create a new section or new question:</h3>
    <div class="draggableNewSection questionBox">
      <div class="questionLabel">NEW SECTION</div>
    </div>    

    <div class="draggableNewQuestion questionBox">
      <div class="questionLabel">NEW QUESTION</div>
    </div>
  </div>
  <hr />
</div>

<div id="allSectionsContainer">
  <ul class="sectionList">
    <li class="sectionBox">
      <div class="bannerHeader">
        <h2>fsdf</h2>

      </div>
      <span id="j_id0:j_id42:0:j_id47">
      <div id="j_id0:j_id42:0:j_id48" class="questionColumn rightBorder">
        <ul class="questionList">                              
          <li class="questionBox                         ">
            <div class="questionLabel">fsdfd</div>

          </li>                              
          <li class="questionBox                         ">
            <div class="questionLabel">fdsfd</div>


          </li>                              
          <li class="questionBox                         ">
            <div class="questionLabel">fdsf</div>

          </li>        
        </ul></div><div id="j_id0:j_id42:0:j_id56" class="questionColumn">
        <ul class="questionList">                              
          <li class="questionBox                         " >
            <div class="questionLabel">ffsd</div>

          </li>                              
          <li class="questionBox                         " >
            <div class="questionLabel">fdsf</div>


          </li>                              
          <li class="questionBox                         ">
            <div class="questionLabel">fsdfd</div>

          </li>                              
          <li class="questionBox                         " >
            <div class="questionLabel">fdsf</div>


          </li>                              
          <li class="questionBox                         ">
            <div class="questionLabel">fdsd</div>

          </li>        
        </ul></div></span>    
    </li>  
  </ul>
</div>

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>');
        }
    });
}

Answer 1

将items 选择器更改为> li，使其仅选择直接的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 子级。

http://jsfiddle.net/jasenhk/sEwhr/8/