jquery - 使用 jQuery Sortables 拖动项目时单选按钮被取消选择

标签 jquery jquery-ui drag-and-drop radio-button jquery-ui-sortable

我正在使用jQuery UI sortables插件允许对某些列表项重新排序。在每个列表项中,我有几个单选按钮,可以启用或禁用该项目。

拖动项目时,两个单选按钮都会被取消选择,这似乎不应该发生。这是正确的行为吗?如果不正确,解决此问题的最佳方法是什么?

这是演示此问题的代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery Sortables Problem</title>
    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="jquery-ui.min.js" type="text/javascript"></script>

    <style type="text/css">
        .items
        {
          margin-top: 30px;
          margin-left: 0px;
          padding-left: 25px;
          cursor: move;
        }
        .items li
        {
          padding: 10px;
          font-size: 15px;
          border: 1px solid #666;
          background: #eee;
          width: 400px;
          margin-bottom: 15px;
          float: left;
          clear:both;
        }
    </style>

</head>
<body>

<ol id="itemlist" class="items"> 
    <li id="1" class="item">
        Item 1
        <input name="status_1" type="radio" value="1" checked="checked" />enabled
        <input name="status_1" type="radio" value="0" />disabled
    </li> 
    <li id="2" class="item">
        Item 2
        <input name="status_2" type="radio" value="1" checked="checked" />enabled
        <input name="status_2" type="radio" value="0" />disabled
    </li> 
    <li id="3" class="item">
        Item 3
        <input name="status_3" type="radio" value="1" checked="checked" />enabled
        <input name="status_3" type="radio" value="0" />disabled
    </li> 
    <li id="4" class="item">
        Item 4
        <input name="status_4" type="radio" value="1" checked="checked" />enabled
        <input name="status_4" type="radio" value="0" />disabled
    </li> 
</ol>

<script type="text/javascript">
    $('#itemlist').sortable();
</script>

</body>
</html>

一旦用鼠标抓取列表项,两个单选按钮就会被取消选择。

如果这是一个错误,一种解决方法是在移动项目时自动选择“启用”单选按钮,因此我们将非常感谢任何有关如何实现此目的的建议。

更新:我已在 Windows XP x64 上的 FireFox 3、Internet Explorer 7、Opera 9.5 和 Safari 3.1.2 中对此进行了测试,并且所有这些版本中都会出现此问题。

最佳答案

它可能不完全是您正在寻找的,但正在改变

$('#itemlist').sortable();

$('#itemlist').sortable({placeholder: ".items li"});

保留单选按钮选择。

关于jquery - 使用 jQuery Sortables 拖动项目时单选按钮被取消选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/285074/

相关文章:

jQuery计数显示:block的div

css - ui 选项卡和相对位置

javascript - 使用 jQuery 的 each() 在 JavaScript 中更清晰(嵌套)的闭包

ios - 如何在 iPhone 的自定义 UIView 上启用 UIDragInteraction

javascript - 为什么这个 Vidyard 脚本将 $ 更改为 $$?

javascript - 网页在 IE 中呈现空白

javascript - 在javascript中如何将字符串转换为数组并将数组转换为字符串

css - 在位置为 :fixed 的 div 中使用输入字段时,JqueryUi 自动完成显示在错误的位置

python - 用于在一个列表中导入和重新排列的 PyQt QListView 拖放问题

objective-c - 不带 "file://"的拖放 NSURL