jquery UI - able to move draggable into wrong sortable -
i have draggable i've designated connect sortable .sectionlist connecting sortable .questionlist. i'm pretty sure had working before 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 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 create 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, 1 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 questionlists sortable ********************************************/ function makequestionlistssortable() { $('.questionlist').sortable({ connectwith: ".questionlist", cursor: "move", start: function (event,ui) { $(ui.draggable).css('left','auto'); }, receive: function(event, ui) { // if not coming questionlist 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, 1 dragged down $('.draggablenewquestion').eq(1).replacewith('<li id="insertednewquestion" class="questionbox">new question</li>'); } }); }
change items selector > li selects 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 it's picking both sortable li children.
Comments
Post a Comment