jquery UI - able to move draggable into wrong sortable

Question

I have a draggable that I've designated to connect to a sortable .sectionList however its also connecting to another sortable .questionList. I'm pretty sure I had this working before but can't figure out what's wrong.

Fiddle: http://jsfiddle.net/sEwhr/4/

Full screen fiddle: http://jsfiddle.net/sEwhr/4/embedded/result/

HTML (stripped a lot of stuff out):

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

Jasen · Accepted Answer · 2014-01-31 20:34:16Z

1

Change the items selector to > li so it only selects the immediate li items.

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

You have nested .questionsList within .selectionList so it's picking up both sortable li children.

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

answered Jan 31, 2014 at 20:34

Jasen

14.3k3 gold badges55 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery UI - able to move draggable into wrong sortable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related