Question

我正在使用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>

只要用鼠标抓住列表项，就会取消选中这两个单选按钮。

如果这是一个错误，一个解决方法是在项目移动时自动选择“启用”单选按钮，因此任何关于如何实现这一点的建议也将非常受欢迎。

更新：我在FireFox 3，Internet Explorer 7，Opera 9.5和Safari 3.1.2上测试了这一点，所有这些都在Windows XP x64上进行，所有这些都出现了这个问题。

Answer 1

这可能不是您正在寻找的，而是改变

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

到

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

保持选择单选按钮。

Answer 2

更新：这适用于jQuery.ui 1.5.2。如果你使用1.6rc2试试Ben Koehler解决方案。

似乎sortables插件克隆了正在移动的节点。如果我们使用$('#itemlist li').clone().appendTo("#itemlist");克隆节点，我们会看到类似的行为，因为现在有4个具有相同名称的单选按钮，而不是两个。

您可以使用帮助程序选项覆盖sortables插件的工作方式。试试这个：

$('#itemlist').sortable({helper: function(){
    return $("<li>").css({border: "1px solid red", background: "transparent"}).appendTo("#itemlist")[0];
}});

我们正在创建一个没有单选按钮的新节点，并将其附加到列表中。这个新节点将是动画的节点此代码在FF3和Chrome中运行良好，但IE7会将单选按钮重置为默认状态。

Answer 3

这是在Internet Explorer中吗？众所周知，IE在复制/移动时会丢失复选框和无线电的选择。

http://webbugtrack.blogspot.com/2007/11/bug-299-setattribute-checked-does-not.html

需要重置defaultChecked以使IE行为

Answer 4

某些对收音机按钮失去状态的答案就在这里 http://core.trac.wordpress.org/ticket/16972#comment:4

这是一个很长的路要走，但只有这样我才能找到在被拖到某处后再做单选按钮状态

Answer 5

我遇到了很多相同的问题，但我在这里找到了一个解决方案： http://fiddyp.co.uk/how-to-fix-radio-inputs-losing-focus-when-dragging-a-jquery-ui-sortable-div/这似乎允许我拖放表行，并且单选按钮保持正确。

// global script for commentluv premium settings pages
// workaround for bug that causes radio inputs to lose settings when meta box is dragged.
// http://core.trac.wordpress.org/ticket/16972
jQuery(document).ready(function(){
    // listen for drag drop of metaboxes , bind mousedown to .hndle so it only fires when starting to drag
    jQuery('.hndle').mousedown(function(){
        // set event listener for mouse up on the content .wrap and wait a tick to give the dragged div time to settle before firing the reclick function
        jQuery('.wrap').mouseup(function(){store_radio(); setTimeout('reclick_radio();',50);});
    })
});
/**
* stores object of all radio buttons that are checked for entire form
*/
function store_radio(){
    var radioshack = {};
    jQuery('input[type="radio"]').each(function(){
        if(jQuery(this).is(':checked')){
            radioshack[jQuery(this).attr('name')] = jQuery(this).val();
        }
        jQuery(document).data('radioshack',radioshack);
    });
}
/**
* detect mouseup and restore all radio buttons that were checked
*/
function reclick_radio(){
    // get object of checked radio button names and values
    var radios = jQuery(document).data('radioshack');
    //step thru each object element and trigger a click on it's corresponding radio button
    for(key in radios){
        jQuery('input[name="'+key+'"]').filter('[value="'+radios[key]+'"]').trigger('click');
    }
    // unbind the event listener on .wrap  (prevents clicks on inputs from triggering function)
    jQuery('.wrap').unbind('mouseup');
}

Answer 6

作为Randy，我找到的最佳解决方案是将checked属性存储在另一个属性中，然后在移动后将checked属性返回到无线电输入。我使用可排序的启动和停止参数以更简单的方式做到了，如下所示。

// First, create a function to store the properties.

// Store the checked radio properties
    function gravaSelecoes() {
      $("tbody.linhasConf").find("input:radio").each(function () {
        if ($(this).prop("checked"))
          $(this).attr("data-checked", "true");
        else
          $(this).attr("data-checked", "false");
      });
    }

// Then, create a function that restore the properties

// Restore the checked radio properties
    function atualizaSelecoes() {
      $("tbody.linhasConf").find("input:radio").each(function () {
        if ($(this).attr("data-checked") == "true")
          $(this).prop("checked", true);
        else
          $(this).prop("checked", false);
      });
    }

// And when declaring sortables, refer to those functions

    $('tbody.linhasConf').sortable({
      start: gravaSelecoes,
      stop: atualizaSelecoes
    }).disableSelection();

罗德里戈

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

6 个答案: