-2

基于这两个示例（拖放时更改类名，反之亦然 - jqueryUI）和（通过 POST 提交 UL 的最佳方式？）我正在尝试构建一个表单，其中包含三个类别列表。

第一个包含完整列表，然后将您想要的类别拖到另一个列表中，通过表单提交。我们称它们为 Main、First 和 Second。

我想要做的是更改 ui 项的类，但不使用下面示例中的预定义名称类，而是通过将其放入列表中自动更改类名。因此，如果我将一个项目从主列表拖放到第一个列表，我希望脚本自动检测列表名称，并将项目类更改为该名称。

我不知道我是否清楚这一点。

任何帮助都将不胜感激。

这是我到目前为止所拥有的

<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');
        }
   });
4

1 回答 1

0

所以我设法做到了，如果我的问题不够清楚，我很抱歉。

也许这可以帮助将来的人。

问候

<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-05T18:46:13.087 回答