jQuery 중첩 정렬 - 중첩 된 LI 요소를 이동할 수 없습니다.

Question

내가 곤난합니다. 저는이 문제를 2 일 동안 풀려고 노력해 왔으며이 사이트를 포함하여 온라인을 통해 모든 것을 보았습니다. 이것은 매우 실망스럽고, 당신이 그것을 풀 수 있다면 나는 매우 감동 할 것입니다.

jQuery 플러그인 nestedsortables (http://code.google.com/p/nestedsortables/wiki/NestedSortableDocumentation)를 사용하여 관리 패널에 드래그하여 페이지의 순서를 정렬하는 Interspire 장바구니를 사용하고 있습니다. 적하. 다음은 동일한 작업을 수행하는 다른 스크립트의 데모입니다. http://mjsarfatti.com/sandbox/nestedSortable/

중첩 된 하위 위치를 포함하여 임의의 순서로 상위 페이지 (목록에있는 실제 페이지가 아님)를 드래그 할 수 있습니다. (새로 고칠 때까지, 그리고 자식 위치에 걸린 채로) 되돌아옵니다. 하위 페이지는 끌거나 이동할 수 없으며 커서는 부모 페이지처럼 4 방향 화살표로 바뀝니다.

나는 HTML을 여러 번 조사 했으므로 셀 수 없을만큼 많이 잃었습니다. HTML은 부모와 자식에 대해 거의 동일하게 보이므로, 내가 왜 작동하는지, 왜 작동하지 않는지를 알아낼 수 있습니다. 아마도 ul 태그 나 li 태그와 관련이 있을지 모르지만 문제가 보이지 않습니다.

나는 내 코드를 Interspire 데모 (http://shoppingcart.interspire-demo.com/demos)의 코드와 비교했는데 어떤 차이점도 발견하지 못했다. 그들의 관리 패널은 작동하지만 내 것은 아닙니다. 이 기능을 제어하는 ​​2 개의 자바 스크립트 파일을 다시 업로드하려고했지만 문제가 지속됩니다. 여기

는 HTML 코드입니다 :

<table class="GridPanel SortablePanel" cellspacing="0" cellpadding="0" border="0" style="width: 100%; margin-top: 10px;"> 
<tbody> 
<tr class="Heading3"> 
<td width="1" style="padding-left: 5px;"> 
<input type="checkbox" style="vertical-align: middle;" onclick="ToggleDeleteBoxes(this.checked)"> 
</td> 
<td> Page Name &nbsp; </td> 
<td width="120"> Page Type &nbsp; </td> 
<td width="80" align="center"> Visible &nbsp; </td> 
<td width="80"> Action </td> 
</tr> 
</tbody> 
</table> 
<ul id="PageList" class="SortableList"> 
<li id="ele-5" class="SortableRow"></li> << **collapsed** 
<li id="ele-3" class="SortableRow"></li> << **collapsed** 
<li id="ele-11" class="SortableRow"> 
<table class="GridPanel" cellspacing="0" cellpadding="0" border="0" style="width: 100%;"> 
<tbody> 
<tr class="GridRow" onmouseout="this.className='GridRow'" onmouseover="this.className='GridRowOver'"> 
<td width="1"> 
<input type="checkbox" value="11" name="page[]"> 
</td> 
<td width="150" style="display: none;"> </td> 
<td class="DragMouseDown sort-handle " style="-moz-user-select: none;"> PARENT </td> 
<td class="HideOnDrag " width="120">Normal Page</td> 
<td class="HideOnDrag " width="80" align="center"> 
<a href="index.php?ToDo=editPageVisibility&pageId=11&visible=1" title="Click here to make this page visible on your web site"> 
<img border="0" src="images/cross.gif"> 
</a> 
</td> 
<td class="HideOnDrag" width="80"> 
<a href="javascript:PreviewPage(11)" title="Preview Page">Preview</a> 
<a href="index.php?ToDo=editPage&pageId=11" title="Edit this page">Edit</a> 
</td> 
</tr> 
</tbody> 
</table> 
<ul class="SortableList" style="padding-left: 30px; padding-right: 0px;"> 
<li id="ele-12" class="SortableRow"> 
<table class="GridPanel" cellspacing="0" cellpadding="0" border="0" style="width: 100%;"> 
<tbody> 
<tr class="GridRow" onmouseout="this.className='GridRow'" onmouseover="this.className='GridRowOver'"> 
<td width="1"> 
<input type="checkbox" value="12" name="page[]"> 
</td> 
<td width="150" style="display: none;"> </td> 
<td class="DragMouseDown sort-handle " style="-moz-user-select: none;"> CHILD ONE </td> 
<td class="HideOnDrag " width="120">Normal Page</td> 
<td class="HideOnDrag " width="80" align="center"> 
<a href="index.php?ToDo=editPageVisibility&pageId=12&visible=1" title="Click here to make this page visible on your web site"> 
<img border="0" src="images/cross.gif"> 
</a> 
</td> 
<td class="HideOnDrag" width="80"> 
<a href="javascript:PreviewPage(12)" title="Preview Page">Preview</a> 
<a href="index.php?ToDo=editPage&pageId=12" title="Edit this page">Edit</a> 
</td> 
</tr> 
</tbody> 
</table> 
</li> 
<li id="ele-13" class="SortableRow"> 
<table class="GridPanel" cellspacing="0" cellpadding="0" border="0" style="width: 100%;"> 
<tbody> 
<tr class="GridRow" onmouseout="this.className='GridRow'" onmouseover="this.className='GridRowOver'"> 
<td width="1"> 
<input type="checkbox" value="13" name="page[]"> 
</td> 
<td width="150" style="display: none;"> </td> 
<td class="DragMouseDown sort-handle " style="-moz-user-select: none;"> CHILD TWO </td> 
<td class="HideOnDrag " width="120">Normal Page</td> 
<td class="HideOnDrag " width="80" align="center"> 
<a href="index.php?ToDo=editPageVisibility&pageId=13&visible=1" title="Click here to make this page visible on your web site"> 
<img border="0" src="images/cross.gif"> 
</a> 
</td> 
<td class="HideOnDrag" width="80"> 
<a href="javascript:PreviewPage(13)" title="Preview Page">Preview</a> 
<a href="index.php?ToDo=editPage&pageId=13" title="Edit this page">Edit</a> 
</td> 
</tr> 
</tbody> 
</table> 
</li> 
</ul> 
</li> 
</ul> 
</div> 
<div id="div1" style="display: none;"> 
</div> 
</td> 
</tr> 
</tbody> 
</table> 

내가 페이지 부모, 자식 ONE, 그리고 자녀 두 이름. 2 개의 하위 페이지는 상위에 중첩되어 있습니다. 부모는 드래그 가능하지만 2 개의 중첩 페이지는 그렇지 않습니다.

jQuery.iNestedSortable = { 
    checkHover: function (e, o) { 
     if (e.isNestedSortable) { 
      jQuery.iNestedSortable.scroll(e); 
      return jQuery.iNestedSortable.newCheckHover(e) 
     } else { 
      return jQuery.iNestedSortable.oldCheckHover(e, o) 
     } 
    }, 
    oldCheckHover: jQuery.iSort.checkhover, 
    newCheckHover: function (e) { 
     if (!jQuery.iDrag.dragged) { 
      return 
     } 
     if (!(e.dropCfg.el.size() > 0)) { 
      return 
     } 
     if (!e.nestedSortCfg.remeasured) { 
      jQuery.iSort.measure(e); 
      e.nestedSortCfg.remeasured = true 
     } 
     var a = jQuery.iNestedSortable.findPrecedingItem(e); 
     var b = jQuery.iNestedSortable.shouldNestItem(e, a); 
     var c = (!a) ? jQuery.iNestedSortable.isTouchingFirstItem(e) : false; 
     var d = false; 
     if (a) { 
      if (e.nestedSortCfg.lastPrecedingItem === a && e.nestedSortCfg.lastShouldNest === b) { 
       d = true 
      } 
     } else if (e.nestedSortCfg.lastPrecedingItem === a && e.nestedSortCfg.lastTouchingFirst === c) { 
      d = true 
     } 
     e.nestedSortCfg.lastPrecedingItem = a; 
     e.nestedSortCfg.lastShouldNest = b; 
     e.nestedSortCfg.lastTouchingFirst = c; 
     if (d) { 
      return 
     } 
     if (a !== null) { 
      if (b) { 
       jQuery.iNestedSortable.nestItem(e, a) 
      } else { 
       jQuery.iNestedSortable.appendItem(e, a) 
      } 
     } else if (c) { 
      jQuery.iNestedSortable.insertOnTop(e) 
     } 
    }, 
    scroll: function (e) { 
     if (!e.nestedSortCfg.autoScroll) { 
      return false 
     } 
     var a = e.nestedSortCfg.scrollSensitivity; 
     var b = e.nestedSortCfg.scrollSpeed; 
     var c = jQuery.iDrag.dragged.dragCfg.currentPointer; 
     var d = jQuery.iUtil.getScroll(); 
     if ((c.y - d.ih) - d.t > -a) { 
      window.scrollBy(0, b) 
     } 
     if (c.y - d.t < a) { 
      window.scrollBy(0, -b) 
     } 
    }, 
    check: function (a) { 
     jQuery.iNestedSortable.newCheck(a); 
     return jQuery.iNestedSortable.oldCheck(a) 
    }, 
    oldCheck: jQuery.iSort.check, 
    newCheck: function (a) { 
     if (jQuery.iNestedSortable.latestNestingClass && jQuery.iNestedSortable.currentNesting) { 
      jQuery.iNestedSortable.currentNesting.removeClass(jQuery.iNestedSortable.latestNestingClass); 
      jQuery.iNestedSortable.currentNesting = null; 
      jQuery.iNestedSortable.latestNestingClass = "" 
     } 
     if (jQuery.iDrop.overzone.isNestedSortable) { 
      jQuery.iDrop.overzone.nestedSortCfg.remeasured = false 
     } 
    }, 
    serialize: function (s) { 
     if (jQuery('#' + s).get(0).isNestedSortable) { 
      return jQuery.iNestedSortable.newSerialize(s) 
     } else { 
      return jQuery.iNestedSortable.oldSerialize(s) 
     } 
    }, 
    oldSerialize: jQuery.iSort.serialize, 
    newSerialize: function (s) { 
     var i; 
     var h = ''; 
     var j = ''; 
     var o = {}; 
     var e; 
     var k = function (f) { 
       var g = []; 
       thisChildren = jQuery(f).children('.' + jQuery.iSort.collected[s]); 
       thisChildren.each(function (i) { 
        var a = jQuery.attr(this, 'id'); 
        if (a && a.match) { 
         a = a.match(e.nestedSortCfg.serializeRegExp)[0] 
        } 
        if (h.length > 0) { 
         h += '&' 
        } 
        h += s + j + '[' + i + '][id]=' + a; 
        g[i] = { 
         id: a 
        }; 
        var b = jQuery(this).children(e.nestedSortCfg.nestingTag + "." + e.nestedSortCfg.nestingTagClass.split(" ").join(".")).get(0); 
        var c = j; 
        j += '[' + i + '][children]'; 
        var d = k(b); 
        if (d.length > 0) { 
         g[i].children = d 
        } 
        j = c 
       }); 
       return g 
      }; 
     if (s) { 
      if (jQuery.iSort.collected[s]) { 
       e = jQuery('#' + s).get(0); 
       o[s] = k(e) 
      } else { 
       for (a in s) { 
        if (jQuery.iSort.collected[s[a]]) { 
         e = jQuery('#' + s[a]).get(0); 
         o[s[a]] = k(e) 
        } 
       } 
      } 
     } else { 
      for (i in jQuery.iSort.collected) { 
       e = jQuery('#' + i).get(0); 
       o[i] = k(e) 
      } 
     } 
     return { 
      hash: h, 
      o: o 
     } 
    }, 
    findPrecedingItem: function (e) { 
     var d = 0; 
     var f = jQuery.grep(e.dropCfg.el, function (i) { 
      var a = (i.pos.y < jQuery.iDrag.dragged.dragCfg.ny) && (i.pos.y > d); 
      if (!a) { 
       return false 
      } 
      var b; 
      if (e.nestedSortCfg.rightToLeft) { 
       b = (i.pos.x + i.pos.wb + e.nestedSortCfg.snapTolerance > jQuery.iDrag.dragged.dragCfg.nx + jQuery.iDrag.dragged.dragCfg.oC.wb) 
      } else { 
       b = (i.pos.x - e.nestedSortCfg.snapTolerance < jQuery.iDrag.dragged.dragCfg.nx) 
      } 
      if (!b) { 
       return false 
      } 
      var c = jQuery.iNestedSortable.isBeingDragged(e, i); 
      if (c) { 
       return false 
      } 
      d = i.pos.y; 
      return true 
     }); 
     if (f.length > 0) { 
      return f[(f.length - 1)] 
     } else { 
      return null 
     } 
    }, 
    isTouchingFirstItem: function (e) { 
     var c; 
     var d = jQuery.grep(e.dropCfg.el, function (i) { 
      var a = (c === undefined || i.pos.y < c); 
      if (!a) { 
       return false 
      } 
      var b = jQuery.iNestedSortable.isBeingDragged(e, i); 
      if (b) { 
       return false 
      } 
      c = i.pos.y; 
      return true 
     }); 
     if (d.length > 0) { 
      d = d[(d.length - 1)]; 
      return d.pos.y < jQuery.iDrag.dragged.dragCfg.ny + jQuery.iDrag.dragged.dragCfg.oC.hb && d.pos.y > jQuery.iDrag.dragged.dragCfg.ny 
     } else { 
      return false 
     } 
    }, 
    isBeingDragged: function (e, a) { 
     var b = jQuery.iDrag.dragged; 
     if (!b) { 
      return false 
     } 
     if (a == b) { 
      return true 
     } 
     if (jQuery(a).parents("." + e.sortCfg.accept.split(" ").join(".")).filter(function() { 
      return this == b 
     }).length !== 0) { 
      return true 
     } else { 
      return false 
     } 
    }, 
    shouldNestItem: function (e, a) { 
     if (!a) { 
      return false 
     } 
     if (e.nestedSortCfg.noNestingClass && jQuery(a).filter("." + e.nestedSortCfg.noNestingClass).get(0) === a) { 
      return false 
     } 
     if (e.nestedSortCfg.rightToLeft) { 
      return a.pos.x + a.pos.wb - (e.nestedSortCfg.nestingPxSpace - e.nestedSortCfg.snapTolerance) > jQuery.iDrag.dragged.dragCfg.nx + jQuery.iDrag.dragged.dragCfg.oC.wb 
     } else { 
      return a.pos.x + (e.nestedSortCfg.nestingPxSpace - e.nestedSortCfg.snapTolerance) < jQuery.iDrag.dragged.dragCfg.nx 
     } 
    }, 
    nestItem: function (e, a) { 
     var b = jQuery(a).children(e.nestedSortCfg.nestingTag + "." + e.nestedSortCfg.nestingTagClass.split(" ").join(".")); 
     var c = jQuery.iSort.helper; 
     styleHelper = c.get(0).style; 
     styleHelper.width = 'auto'; 
     if (!b.size()) { 
      var d = "<" + e.nestedSortCfg.nestingTag + " class='" + e.nestedSortCfg.nestingTagClass + "'></" + e.nestedSortCfg.nestingTag + ">"; 
      b = jQuery(a).append(d).children(e.nestedSortCfg.nestingTag).css(e.nestedSortCfg.styleToAttach) 
     } 
     jQuery.iNestedSortable.updateCurrentNestingClass(e, b); 
     jQuery.iNestedSortable.beforeHelperRemove(e); 
     b.prepend(c.get(0)); 
     jQuery.iNestedSortable.afterHelperInsert(e) 
    }, 
    appendItem: function (e, a) { 
     jQuery.iNestedSortable.updateCurrentNestingClass(e, jQuery(a).parent()); 
     jQuery.iNestedSortable.beforeHelperRemove(e); 
     jQuery(a).after(jQuery.iSort.helper.get(0)); 
     jQuery.iNestedSortable.afterHelperInsert(e) 
    }, 
    insertOnTop: function (e) { 
     jQuery.iNestedSortable.updateCurrentNestingClass(e, e); 
     jQuery.iNestedSortable.beforeHelperRemove(e); 
     jQuery(e).prepend(jQuery.iSort.helper.get(0)); 
     jQuery.iNestedSortable.afterHelperInsert(e) 
    }, 
    beforeHelperRemove: function (e) { 
     var a = jQuery.iSort.helper.parent(e.nestedSortCfg.nestingTag + "." + e.nestedSortCfg.nestingTagClass.split(" ").join(".")); 
     var b = a.children("." + e.sortCfg.accept.split(" ").join(".") + ":visible").size(); 
     if (b === 0 && a.get(0) !== e) { 
      a.hide() 
     } 
    }, 
    afterHelperInsert: function (e) { 
     var a = jQuery.iSort.helper.parent(); 
     if (a.get(0) !== e) { 
      a.show() 
     } 
     e.nestedSortCfg.remeasured = false 
    }, 
    updateCurrentNestingClass: function (e, a) { 
     var b = jQuery(a); 
     if ((e.nestedSortCfg.currentNestingClass) && (!jQuery.iNestedSortable.currentNesting || b.get(0) != jQuery.iNestedSortable.currentNesting.get(0))) { 
      if (jQuery.iNestedSortable.currentNesting) { 
       jQuery.iNestedSortable.currentNesting.removeClass(e.nestedSortCfg.currentNestingClass) 
      } 
      if (b.get(0) != e) { 
       jQuery.iNestedSortable.currentNesting = b; 
       b.addClass(e.nestedSortCfg.currentNestingClass); 
       jQuery.iNestedSortable.latestNestingClass = e.nestedSortCfg.currentNestingClass 
      } else { 
       jQuery.iNestedSortable.currentNesting = null; 
       jQuery.iNestedSortable.latestNestingClass = "" 
      } 
     } 
    }, 
    destroy: function() { 
     return this.each(function() { 
      if (this.isNestedSortable) { 
       this.nestedSortCfg = null; 
       this.isNestedSortable = null; 
       jQuery(this).SortableDestroy() 
      } 
     }) 
    }, 
    build: function (a) { 
     if (a.accept && jQuery.iUtil && jQuery.iDrag && jQuery.iDrop && jQuery.iSort) { 
      this.each(function() { 
       this.isNestedSortable = true; 
       this.nestedSortCfg = { 
        noNestingClass: a.noNestingClass ? a.noNestingClass : false, 
        rightToLeft: a.rightToLeft ? true : false, 
        nestingPxSpace: parseInt(a.nestingPxSpace, 10) || 30, 
        currentNestingClass: a.currentNestingClass ? a.currentNestingClass : "", 
        nestingLimit: a.nestingLimit ? a.nestingLimit : false, 
        autoScroll: a.autoScroll !== undefined ? a.autoScroll == true : true, 
        scrollSensitivity: a.scrollSensitivity ? a.scrollSensitivity : 20, 
        scrollSpeed: a.scrollSpeed ? a.scrollSpeed : 20, 
        serializeRegExp: a.serializeRegExp ? a.serializeRegExp : /[^\-]*$/ 
       }; 
       this.nestedSortCfg.snapTolerance = parseInt(this.nestedSortCfg.nestingPxSpace * 0.4, 10); 
       this.nestedSortCfg.nestingTag = this.tagName; 
       this.nestedSortCfg.nestingTagClass = this.className; 
       this.nestedSortCfg.styleToAttach = (this.nestedSortCfg.rightToLeft) ? { 
        "padding-left": 0, 
        "padding-right": this.nestedSortCfg.nestingPxSpace + 'px' 
       } : { 
        "padding-left": this.nestedSortCfg.nestingPxSpace + 'px', 
        "padding-right": 0 
       }; 
       jQuery(this.nestedSortCfg.nestingTag, this).css(this.nestedSortCfg.styleToAttach) 
      }); 
      jQuery.iSort.checkhover = jQuery.iNestedSortable.checkHover; 
      jQuery.iSort.check = jQuery.iNestedSortable.check; 
      jQuery.iSort.serialize = jQuery.iNestedSortable.serialize 
     } 
     return this.Sortable(a) 
    } 
}; 
jQuery.fn.extend({ 
    NestedSortable: jQuery.iNestedSortable.build, 
    NestedSortableDestroy: jQuery.iNestedSortable.destroy 
}); 
jQuery.iUtil.getScroll = function (e) { 
    var t, l, w, h, iw, ih; 
    if (e && e.nodeName.toLowerCase() != 'body') { 
     t = e.scrollTop; 
     l = e.scrollLeft; 
     w = e.scrollWidth; 
     h = e.scrollHeight; 
     iw = 0; 
     ih = 0 
    } else { 
     if (document.documentElement && document.documentElement.scrollTop) { 
      t = document.documentElement.scrollTop; 
      l = document.documentElement.scrollLeft; 
      w = document.documentElement.scrollWidth; 
      h = document.documentElement.scrollHeight 
     } else if (document.body) { 
      t = document.body.scrollTop; 
      l = document.body.scrollLeft; 
      w = document.body.scrollWidth; 
      h = document.body.scrollHeight 
     } 
     iw = self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0; 
     ih = self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0 
    } 
    return { 
     t: t, 
     l: l, 
     w: w, 
     h: h, 
     iw: iw, 
     ih: ih 
    } 

이 저를 도와주세요 :

은 아래 참조 용 NestedSortable jQuery를 플러그인 코드입니다. 다른 Interspire 및 NestedSortable 사용자도이 기능이 유용 할 것이라고 확신합니다. 찾아 주셔서 고마워요. 성공 여부에 상관없이이 문제를 해결하려는 모든 사람에게 진심으로 감사드립니다. };

Answer 1

3 시간 반 동안 성공적으로 디버깅하려고하면 code.google.com 대신에 mjsarfatti.com에서 jQuery 플러그 인을 사용하기로 결정했습니다.

Misarfatti의 플러그인을 사용하면 즉시 작동하지 않습니다. 제대로 작동하려면 구성해야하는 설정이 있으므로 브라우저가 작동하지 않을 수 있습니다. 나는 이것이 사적인 관리 패널에서 모든 코드를 가져 와서 jsfiddle에서 작동하도록 설정하기 전에 시도 할 만하다고 생각한다. 비록 내가 그랬다해도,이 질문은 거의 관심을 보이지 않는 것처럼 보이고 아마도 결코 풀리지 않을 것입니다.

이것은 내가 1 년 넘게 가지고있는 가장 큰 코딩 악몽이었습니다. 그래서 누군가 다른 사람이 같은 문제에 부딪혔을 때를 대비해서 여기에 해결책을 게시 할 것이라고 생각했습니다. 나는 누군가가 내가 한 일을 겪어가는 것을 싫어한다. 요청이 있으면 전체 코드를 게시 할 수 있지만 꽤 간단했습니다.