Question

基于这两个例子（change class name when dragged and dropped and vice versa - jqueryUI）和（Best way to submit UL via POST?）我正在尝试构建一个表单，其中我有三个类别列表。

第一个包含完整列表，然后将您想要的类别拖到另一个列表中，通过表单提交。我们称他们为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');
        }
   });

Answer 1

所以我设法做到了这一点，如果我的问题不够明确，我很抱歉。

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

此致

<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>

拖放时更改类名，反之亦然 - jqueryUI - 更多

1 个答案: