拖放时更改类名，反之亦然-jqueryUI-More_Jquery_User Interface_Drag And Drop

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

jquery user-interface

拖放时更改类名，反之亦然-jqueryUI-More,jquery,user-interface,drag-and-drop,Jquery,User Interface,Drag And Drop,基于这两个示例（）和（）我尝试构建一个表单，其中有三个类别列表第一个包含完整的列表，然后您将想要包含在另一个列表中的类别拖动到列表中，列表通过表单提交。让我们把它们称为主要的，第一个和第二个我想做的是更改ui项的类，但不要像下面的示例中那样使用预先定义的名称类，而是通过将类名放入列表中来自动更改类名。因此，如果我将一个项目从主列表拖到第一个列表，我希望脚本自动检测列表名称，并将项目类更改为该名称我不知道我是否清楚这一点任何帮助都将受到感谢这是我到目前为止所拥有的 <form ac

基于这两个示例（）和（）我尝试构建一个表单，其中有三个类别列表

第一个包含完整的列表，然后您将想要包含在另一个列表中的类别拖动到列表中，列表通过表单提交。让我们把它们称为主要的，第一个和第二个

我想做的是更改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>

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

也许这对将来的人有帮助

问候

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




1.


2.


3.




4.


5.


6.


//页底
变量列表=[{
“listid”：“所有colls列表”，
“连接”：“#coll选定列表”
}, {
“列表ID”：“#coll选定列表”，
“连接”：“#所有colls列表”
}];
$.each（列表，函数（i，列表）{
$（list.listid）.可排序({
connectWith:list.connectid，
不透明度：0.7，
开始：功能（事件、用户界面）{
if（$（ui.item）.parents（“#所有colls列表”）.length>0{
$（ui.item）.addClass（'dropped'）；
}否则{
$（ui.item）.addClass（'sorted'）；
}
},
停止：功能（事件、用户界面）{
if（$（ui.item）.parents（“#所有colls列表”）.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'）；
}否则{
$（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'）；
}
});
});

到目前为止您做了什么？有什么问题。。。。我们不会为你写代码…不，请不要，那不是我的本意。让我编辑问题以添加代码。

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