带奇数移动的V形可排序jQuery_Jquery_Jquery Ui_Jquery Ui Sortable

带奇数移动的V形可排序jQuery

jquery jquery-ui

带奇数移动的V形可排序jQuery,jquery,jquery-ui,jquery-ui-sortable,Jquery,Jquery Ui,Jquery Ui Sortable,如果单击并按住文本，则可以四处移动项目，但如果单击并按住V形，则只有该项目才会移动。我需要调整什么，以便您在LI项目中单击的任何内容都将拖动整个项目 HTML <div id="hidden_row_1" class="hidden_row listContainer" style="display: block;"> <ul class="listItem phaseItem ui-sortable"> <li class="listItem

如果单击并按住文本，则可以四处移动项目，但如果单击并按住V形，则只有该项目才会移动。我需要调整什么，以便您在LI项目中单击的任何内容都将拖动整个项目

HTML

<div id="hidden_row_1" class="hidden_row listContainer" style="display: block;">
   <ul class="listItem phaseItem ui-sortable">
      <li class="listItem phaseTitle ui-sortable-handle ui-sortable" id="phase_232_895">
         <i class="glyphicon glyphicon-chevron-right rotate weekToggle font-blue-madison ui-sortable-handle down"></i> <input type="checkbox" name="phase" id="phase_cb_232_895" class="ui-sortable-handle"> Phase 1 (1) (895)
         <ul class="listItem weekItem ui-sortable-handle ui-sortable" style="">
            <li class="listItem weekTitle ui-sortable-handle ui-sortable" id="week_phase_232_895">
               <i class="glyphicon glyphicon-chevron-right rotate dayToggle font-blue-madison ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_phase_232_895" class="ui-sortable-handle"> Week 1 (1) (895)
               <ul class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">
                  <li class="listItem dayTitle ui-sortable-handle ui-sortable" id="day_phase_232_895">
                     <input type="checkbox" name="day" id="day_cb_phase_232_895" class="child ui-sortable-handle"> Day 4 (895)
                  </li>
               </ul>
            </li>
            <li class="listItem weekTitle ui-sortable-handle ui-sortable" id="week_phase_232_875">
               <i class="glyphicon glyphicon-chevron-right rotate dayToggle font-blue-madison ui-sortable-handle down"></i> <input type="checkbox" name="week" id="week_cb_phase_232_875" class="ui-sortable-handle"> Week 2 (2) (875)
               <ul class="listItem dayItem ui-sortable-handle ui-sortable" style="">
                  <li class="listItem dayTitle ui-sortable-handle ui-sortable" id="day_phase_232_875">
                     <input type="checkbox" name="day" id="day_cb_phase_232_875" class="child ui-sortable-handle"> Day 1 (875)
                  </li>
                  <li class="listItem dayTitle ui-sortable-handle ui-sortable" id="day_phase_232_890">
                     <input type="checkbox" name="day" id="day_cb_phase_232_890" class="child ui-sortable-handle"> Day 2 (890)
                  </li>
                  <li class="listItem dayTitle ui-sortable-handle ui-sortable" id="day_phase_232_904">
                     <input type="checkbox" name="day" id="day_cb_phase_232_904" class="child ui-sortable-handle"> Day 3 (904)
                  </li>
                  <li class="listItem dayTitle ui-sortable-handle ui-sortable" id="day_phase_232_897">
                     <input type="checkbox" name="day" id="day_cb_phase_232_897" class="child ui-sortable-handle"> Day 4 (897)
                  </li>
               </ul>
            </li>
            <li class="listItem weekTitle ui-sortable-handle ui-sortable" id="week_phase_232_892">
               <i class="glyphicon glyphicon-chevron-right rotate dayToggle font-blue-madison ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_phase_232_892" class="ui-sortable-handle"> Week 3 (3) (892)
               <ul class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">
                  <li class="listItem dayTitle ui-sortable-handle ui-sortable" id="day_phase_232_892">
                     <input type="checkbox" name="day" id="day_cb_phase_232_892" class="child ui-sortable-handle"> Day 4 (892)
                  </li>
               </ul>
            </li>
            <li class="listItem weekTitle ui-sortable-handle ui-sortable" id="week_phase_232_893">
               <i class="glyphicon glyphicon-chevron-right rotate dayToggle font-blue-madison ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_phase_232_893" class="ui-sortable-handle"> Week 15 (15) (893)
               <ul class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">
                  <li class="listItem dayTitle ui-sortable-handle ui-sortable" id="day_phase_232_893">
                     <input type="checkbox" name="day" id="day_cb_phase_232_893" class="child ui-sortable-handle"> Day 7 (893)
                  </li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="listItem phaseTitle ui-sortable-handle ui-sortable" id="phase_232_894">
         <i class="glyphicon glyphicon-chevron-right rotate weekToggle font-blue-madison ui-sortable-handle down"></i> <input type="checkbox" name="phase" id="phase_cb_232_894" class="ui-sortable-handle"> Phase 2 (2) (894)
         <ul class="listItem weekItem ui-sortable-handle ui-sortable" style="">
            <li class="listItem weekTitle ui-sortable-handle ui-sortable" id="week_phase_232_894">
               <i class="glyphicon glyphicon-chevron-right rotate dayToggle font-blue-madison ui-sortable-handle down"></i> <input type="checkbox" name="week" id="week_cb_phase_232_894" class="ui-sortable-handle"> Week 1 (1) (894)
               <ul class="listItem dayItem ui-sortable-handle ui-sortable" style="">
                  <li class="listItem dayTitle ui-sortable-handle ui-sortable" id="day_phase_232_894">
                     <input type="checkbox" name="day" id="day_cb_phase_232_894" class="child ui-sortable-handle"> Day 1 (894)
                  </li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="listItem phaseTitle ui-sortable-handle ui-sortable" id="phase_232_885">
         <i class="glyphicon glyphicon-chevron-right rotate weekToggle font-blue-madison ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_232_885" class="ui-sortable-handle"> Phase 3 (3) (885)
         <ul class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">
            <li class="listItem weekTitle ui-sortable-handle ui-sortable" id="week_phase_232_885">
               <i class="glyphicon glyphicon-chevron-right rotate dayToggle font-blue-madison ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_phase_232_885" class="ui-sortable-handle"> Week 15 (15) (885)
               <ul class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">
                  <li class="listItem dayTitle ui-sortable-handle ui-sortable" id="day_phase_232_885">
                     <input type="checkbox" name="day" id="day_cb_phase_232_885" class="child ui-sortable-handle"> Day 7 (885)
                  </li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="listItem phaseTitle ui-sortable-handle ui-sortable" id="phase_232_886">
         <i class="glyphicon glyphicon-chevron-right rotate weekToggle font-blue-madison ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_232_886" class="ui-sortable-handle"> Phase 4 (4) (886)
         <ul class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">
            <li class="listItem weekTitle ui-sortable-handle ui-sortable" id="week_phase_232_886">
               <i class="glyphicon glyphicon-chevron-right rotate dayToggle font-blue-madison ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_phase_232_886" class="ui-sortable-handle"> Week 15 (15) (886)
               <ul class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">
                  <li class="listItem dayTitle ui-sortable-handle ui-sortable" id="day_phase_232_886">
                     <input type="checkbox" name="day" id="day_cb_phase_232_886" class="child ui-sortable-handle"> Day 7 (886)
                  </li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="listItem phaseTitle ui-sortable-handle ui-sortable" id="phase_232_876">
         <i class="glyphicon glyphicon-chevron-right rotate weekToggle font-blue-madison ui-sortable-handle"></i> <input type="checkbox" name="phase" id="phase_cb_232_876" class="ui-sortable-handle"> In-Season (7) (876)
         <ul class="listItem weekItem hide ui-sortable-handle ui-sortable" style="">
            <li class="listItem weekTitle ui-sortable-handle ui-sortable" id="week_phase_232_876">
               <i class="glyphicon glyphicon-chevron-right rotate dayToggle font-blue-madison ui-sortable-handle"></i> <input type="checkbox" name="week" id="week_cb_phase_232_876" class="ui-sortable-handle"> Week 2 (2) (876)
               <ul class="listItem dayItem hide ui-sortable-handle ui-sortable" style="">
                  <li class="listItem dayTitle ui-sortable-handle ui-sortable" id="day_phase_232_876">
                     <input type="checkbox" name="day" id="day_cb_phase_232_876" class="child ui-sortable-handle"> Day 1 (876)
                  </li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</div>

CSS

$("i.rotate").click(function () {
    var rowID = $(this).data('rowid');
    var woCoreID = $(this).data('wocoreid');
    var libraryPart = 'phase';

    $("#hidden_row_" + rowID).slideToggle(.0005);
    $(this).toggleClass("down");

    // getPhaseDataForLibraryTree(woCoreID, libraryPart);
    // togglePhaseView();
});

$(".weekToggle").click(function (e) {
    console.log('weekToggle');
    if ($(this).next().next().hasClass('hide')) {
        $(this).next().next().removeClass('hide');
        // $(this).toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
    } else {
        $(this).next().next().addClass('hide');
        // $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
    }
});

$(".dayToggle").click(function (e) {
    console.log('dayToggle');
    if ($(this).next().next().hasClass('hide')) {
        $(this).next().next().removeClass('hide');
        console.log('removed hide');
        // $(this).toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
    } else {
        $(this).next().next().addClass('hide');
        console.log('restored hide');
        // $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
    }
});

$(".listContainer ul, .listContainer div, .listContainer li").sortable({
    /* connectWith: ".group", */
    placeholder: "itemPlaceholder",
    cursor: 'move',
    axis: false
});

$('ul.phaseItem').sortable({
    items: "> li.listItem.phaseTitle",
    revert: true,
    //    connectWith: ".srtable, .group",
    connectWith: '.phaseItem',
    axis: false,
    receive: function (event, ui) {
        if ($(ui.item).hasClass('weekTitle', 'dayTitle')) {
            $(ui.sender).sortable("cancel");
            alert('Sorry! Phases cannot be dropped here.');
        }
    }
});

$('ul.weekItem').sortable({
    items: "li.listItem.weekTitle",
    axis: false,
    revert: true,
    connectWith: ".weekItem",
    receive: function (event, ui) {
        if ($(ui.item).hasClass('dayTitle', 'phaseTitle')) {
            $(ui.sender).sortable("cancel");
            alert('Sorry! Weeks cannot be dropped here.');
        }

    }
});

$('ul.dayItem').sortable({
    items: "li.listItem.dayTitle",
    revert: true,
    axis: false,
    connectWith: ".dayItem",
    receive: function (event, ui) {
        if ($(ui.item).hasClass('weekTitle', 'phaseTitle')) {
            $(ui.sender).sortable("cancel");
            alert('Sorry! Days cannot be dropped here.');
        }
    }
});

.hidden_row {
     display:none;
}
 .rotate{
     -moz-transition: all .25s linear;
     -webkit-transition: all .25s linear;
     transition: all .25s linear;
     cursor: pointer;
}
 .rotate.down{
     -moz-transform:rotate(90deg);
     -webkit-transform:rotate(90deg);
     transform:rotate(90deg);
     cursor: pointer;
}
 .pointer {
     cursor: pointer;
}
 ul > li {
     padding-left: 10px;
}
 li {
     list-style: none;
}
 ul > li.workoutWeek {
     margin-left: 30px !important;
}
 ul > li.workoutDay {
     margin-left:60px !important;
}
 ul.list-group {
     margin-bottom: 0px !important;
}
 .placeholder {
     border: 1px solid green;
     background-color: white;
     -webkit-box-shadow: 0px 0px 10px #888;
     -moz-box-shadow: 0px 0px 10px #888;
     box-shadow: 0px 0px 10px #888;
}
 #listContainer {
    /*width:400px;
    */
     width:100%;
}
 ul {
     list-style: none;
     padding:0;
     margin:0;
}
 .listItem {
     margin: 5px 0px 5px 15px;
     border: 0px;
    /*background-color: #cecece;
    */
     padding: 1px;
    /*cursor: move;
    */
}
 .phaseItem {
    /*background: #ccc;
    */
     min-height: 30px;
}
 .phaseTitle {
    /* background:#abc;
     padding:10px;
    */
}
 .weekItem {
    /*margin: 0px 0px 0px 10px;
    */
     min-height: 30px;
    /*padding: 10px;
    */
}
 .weekTitle {
    /*margin: 0px 0px 0px 10px;
     border: 1px solid #999;
     background-color: #fff;
     padding: 5px;
    */
    /*cursor: pointer;
    */
}
 .dayItem {
    /* background: #fff;
     padding:10px;
    */
     min-height: 30px;
    /*margin: 0px 0px 0px 10px;
    */
}
 .dayTitle{
    /* margin: 0px 0px 0px 10px;
     border: 1px solid #999;
     background-color: #fff;
     padding: 5px;
    */
    /*cursor: pointer;
    */
}
 .itemPlaceholder {
     border: 1px dashed #cecece;
     font-weight: bold;
     font-size: 45px;
     background-color: #fce77e;
     min-height:30px;
}

注释如下：

/$（“.listContainer ul、.listContainer div、.listContainer li”）。可排序({
//连接到：“.group”，
//占位符：“项目占位符”，
//光标：“移动”，
//轴：假
// });
然后将占位符：“itemPlaceholder”复制到其他可排序的初始值设定项中，似乎就完成了这项任务
`$（'ul.phaseItem'）。可排序（{

项目：“>li.listItem.phaseTitle”，

还原：真，

//连接到：“.srtable、.group”，

占位符：“项目占位符”，

连接：'.phaseItem'，

轴：假，

接收：函数（事件，用户界面）{

if（$（ui.item）.hasClass（'weekTitle'，'dayTitle'））{

$（ui.sender）。可排序（“取消”）；

警报（'抱歉！无法在此删除阶段。'）；

}

}

});  
我无法加载您的JSFIDLE。它会进入站点并一直尝试加载。我看到项
被设置为li.listItem.phaseTitle
，因此句柄将被设置为该值，而不是项中的元素。没有测试，很难知道。当你检查物品时，ui可排序句柄
是否分配给物品？运行起来了：我怀疑click
事件的冒泡方式不同，因为你有一个用于在展开或折叠时旋转V形的回调。奇怪的是小提琴不工作。是，ui可排序句柄
正在分配给对象。那么，也许我需要一个stopPropagation（）。我没有考虑过。谢谢你的想法，我会尝试一下。我刚刚意识到我可以将V形图标拖放到对应复选框的另一侧。我开始认为这是与我将代码> > SoTable（）/代码>分配给元素的方式。你可能想考虑一个不同的初始化顺序。谢谢你扭了一下让我看这个问题有点不同。似乎起作用了。我注意到，如果你通过雪佛龙拖动，它也会旋转。所以，它至少可以同时执行这两种操作。我可能会更多地使用StopRogation，看看是否可以停止这种行为，但现在它的UI要好得多：）
$('ul.weekItem').sortable({
    items: "li.listItem.weekTitle",
    axis: false,
    revert: true,
    placeholder: "itemPlaceholder",
    connectWith: ".weekItem",
    receive: function( event, ui ) {
      if ($(ui.item).hasClass('dayTitle','phaseTitle')) {
        $(ui.sender).sortable("cancel");
        alert('Sorry! Weeks cannot be dropped here.');
      }

    }
});

$('ul.dayItem').sortable({
    items: "li.listItem.dayTitle",
    revert: true,
    axis: false,
    placeholder: "itemPlaceholder",
    connectWith: ".dayItem",
    receive: function( event, ui ) {
      if ($(ui.item).hasClass('weekTitle','phaseTitle')) {
        $(ui.sender).sortable("cancel");
        alert('Sorry! Days cannot be dropped here.');
      }
    }
});`