在拖放時更改類名稱，反之亦然 - jqueryUI - 更多

-2

基於這兩個示例（change class name when dragged and dropped and vice versa - jqueryUI）和（Best way to submit UL via POST?）我試圖構建一個表單，其中有三個類別列表。在拖放時更改類名稱，反之亦然 - jqueryUI - 更多

第一個包含完整列表，然後將其他列表中的類別拖到列表中，這些列表通過表單提交。我們稱它們爲Main，First和Second。

我想要做的是更改ui項目的類，但不像以下示例中那樣使用預定義名稱類，而是通過將其刪除到列表中來自動更改類名稱。因此，如果我從主列表中刪除一個項目到第一個列表，我希望腳本自動檢測列表名稱，並將項目類別更改爲該名稱。

我不知道我是否清楚這一點。

任何幫助將appriciated。

這裏是我到目前爲止

<form action="prueba.html" method="get" accept-charset="utf-8"> 
<ul id="todos" class="droptrue ui-sortable" name="all"> 
    <li class="sortedli"> 
    1<input type='hidden' name='cats' value='1'/> 
    </li> 
    <li class="sortedli"> 
    2<input type='hidden' name='cats' value='2'/> 
    </li> 
    <li class="sortedli"> 
    3<input type='hidden' name='cats' value='3'/> 
    </li> 
</ul> 


<ul id="seleccionados" class="droptrue ui-sortable" name="selected"> 
    <li class="sortedli" style=""> 
    4<input type='hidden' name='selected' value='4'/> 
    </li> 
    <li class="sortedli" style=""> 
    5<input type='hidden' name='selected' value='5'/> 
    </li> 
    <li class="sortedli" style=""> 
    6<input type='hidden' name='selected' value='6'/> 
    </li> 
</ul> 
<input type="submit" name="submit" id="submit" value="Enviar" /> 

</body> 



<script type="text/javascript"> 

var lists = [{ 
    "listid": "#todos", 
    "connectid": "#seleccionados" 
}, { 
    "listid": "#seleccionados", 
    "connectid": "#todos" 
}]; 
$.each(lists, function(i, list) { 
    $(list.listid).sortable({ 
     connectWith: list.connectid, 
     opacity: 0.7, 
     start: function(event, ui) { 
      if ($(ui.item).parents('#todos').length > 0) { 
       $(ui.item).addClass('dropped'); 
      } else { 
       $(ui.item).addClass('sorted'); 
      } 
     }, 
     stop: function(event, ui) { 
      if ($(ui.item).parents('#todos').length > 0) { 
       $(ui.item).switchClass('droppedli', 'sortedli'); 

      } else { 
       $(ui.item).switchClass('sortedli', 'droppedli'); 

      } 
      $(ui.item).removeClass('sorted'); 
      $(ui.item).removeClass('dropped'); 
     } 
    }); 
}); 

// BOTTOM OF PAGE 
</script>

我還在努力使其發揮作用。我想我有這行來打，並改變「sorteli」和「droppedli」獲取父目錄的屬性，其中我下探

 stop: function(event, ui) { 
      if ($(ui.item).parents('#all-colls-list').length > 0) { 
       $(ui.item).switchClass('droppedli', 'sortedli'); 
      } else { 
       $(ui.item).switchClass('sortedli', 'droppedli'); 
      } 
      $(ui.item).removeClass('sorted'); 
      $(ui.item).removeClass('dropped'); 
     } 
    });

來源

2012-12-05 Darklomba

你有什麼迄今所做？有什麼問題？ ....我們不會爲你寫代碼... – Neal

不，請，那不是我的意圖。讓我編輯問題以添加代碼。 – Darklomba

所以我設法項的值做到這一點，如果我的問題不夠清楚，我很抱歉。

也許這可以幫助未來的人。

問候

<body> 
<form action="prueba.html" method="get" accept-charset="utf-8"> 
<ul id="all-colls-list" class="droptrue ui-sortable" name="todos"> 
    <li class="sortedli" name=""> 
    1<input type='hidden' name='cats' value='1'/> 
    </li> 
    <li class="sortedli" name=""> 
    2<input type='hidden' name='cats' value='2'/> 
    </li> 
    <li class="sortedli" name=""> 
    3<input type='hidden' name='cats' value='3'/> 
    </li> 
</ul> 


<ul id="coll-selected-list" class="droptrue ui-sortable" name="seleccionados"> 
    <li class="sortedli" name=""> 
    4<input type='hidden' name='cats' value='4'/> 
    </li> 
    <li class="sortedli" name=""> 
    5<input type='hidden' name='cats' value='5'/> 
    </li> 
    <li class="sortedli" name=""> 
    6<input type='hidden' name='cats' value='6'/> 
    </li> 
</ul> 
<input type="submit" name="submit" id="submit" value="Enviar" /> 

</body> 



<script type="text/javascript"> 


// BOTTOM OF PAGE 
var lists = [{ 
    "listid": "#all-colls-list", 
    "connectid": "#coll-selected-list" 
}, { 
    "listid": "#coll-selected-list", 
    "connectid": "#all-colls-list" 
}]; 
$.each(lists, function(i, list) { 
    $(list.listid).sortable({ 
     connectWith: list.connectid, 
     opacity: 0.7, 
     start: function(event, ui) { 
      if ($(ui.item).parents('#all-colls-list').length > 0) { 
       $(ui.item).addClass('dropped'); 
      } else { 
       $(ui.item).addClass('sorted'); 
      } 
     }, 
     stop: function(event, ui) { 
      if ($(ui.item).parents('#all-colls-list').length > 0) { 
       $(ui.item).switchClass('droppedli', 'sortedli'); 
       $(ui.item).attr('name', $(ui.item).closest("ul").attr('name')); 
       $(ui.item).children("input").attr('name', $(ui.item).closest("ul").attr('name')); 

      } else { 
       $(ui.item).switchClass('sortedli', 'droppedli'); 
       $(ui.item).attr('name', $(ui.item).closest("ul").attr('name')); 
       $(ui.item).children("input").attr('name', $(ui.item).closest("ul").attr('name')); 

      } 
      $(ui.item).removeClass('sorted'); 
      $(ui.item).removeClass('dropped'); 
     } 
    }); 
}); 

</script> 

</html>

來源

2012-12-05 18:46:13 Darklomba

在拖放時更改類名稱，反之亦然 - jqueryUI - 更多

回答

相關問題