代码之家 › 专栏 › 技术社区 › HPWD

jquery可按V形符号的奇数移动排序

jquery-ui-sortable jquery-ui jquery

HPWD · 技术社区 · 6 年前

如果单击并按住文本,则可以移动项目,但如果单击并按住V形符号,则只有V形符号会移动。我需要调整什么,以便您在li项目中单击的任何内容都将拖动整个项目?

https://jsfiddle.net/SavageCatHV/n172Leam/1/

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>

$("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.');
        }
    }
});

CSS

.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;
}

1 回复 | 直到 6 年前

HPWD 6 年前

https://jsfiddle.net/SavageCatHV/oa9mnet1/1/

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

然后将placeholder“itemplaceholder”复制到其他可排序的初始值设定项中似乎已经完成了这个技巧。

`$('ul.phaseItem')。可排序({
项目:“>li.listem.phaseTitle”,
回复:真的,
//连接方式:“.srtable,.group”,
placeholder:“项目占位符”,
连接方式:“.phaseItem”,
轴:假,
接收:功能(事件、用户界面){
if($(ui.item.hasClass('weekTitle','dayTitle')){
$(ui.sender).sortable(“cancel”);
警告(对不起)!不能在此处删除阶段。');
}
}
(});

$('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.');
      }
    }
});`