7

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>

リスト項目をマウスでつかむとすぐに、両方のラジオ ボタンの選択が解除されます。

これがバグである場合、回避策の 1 つは、アイテムが移動されたときに [有効] ラジオ ボタンを自動的に選択することです。

更新: Windows XP x64 上の FireFox 3、Internet Explorer 7、Opera 9.5、および Safari 3.1.2 でこれをテストしましたが、この問題はすべての環境で発生します。

4

6 に答える 6

1

更新: これは jQuery.ui 1.5.2 に適用されます。1.6rc2 を使用している場合は、Ben Koehler ソリューションを試してください。

sortables プラグインが、移動中のノードを複製しているようです。を使用してノードを複製する$('#itemlist li').clone().appendTo("#itemlist");と、同じ名前のラジオ ボタンが 2 つではなく 4 つあるため、同様の動作が見られます。

ヘルパー オプションを使用して、sortables プラグインの動作をオーバーライドできます。これを試して：

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

ラジオ ボタンなしで新しいノードを作成し、それをリストに追加します。この新しいノードがアニメーション化されます。
このコードは FF3 と Chrome では問題なく動作しますが、IE7 ではラジオ ボタンがデフォルトの状態にリセットされ続けます。

于 2008-11-17T09:13:40.343 に答える
1

探しているものとは違うかもしれませんが、変更してください

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

に

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

ラジオボタンの選択を保持します。

于 2008-11-14T17:05:56.117 に答える
0

ステータスを失うラジオボタンに対するある種の答えはここにあります http://core.trac.wordpress.org/ticket/16972#comment:4

少し長い道のりですが、どこかにドラッグされた後にラジオボタンのステータスをやり直す方法を見つけることができた唯一の方法です

于 2011-07-23T13:48:49.330 に答える
0

これは Internet Explorer にありますか? IE では、コピーまたは移動すると、チェックボックスとラジオの選択が失われることが知られています。

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

IE が動作するには、defaultChecked をリセットする必要があります

于 2008-11-12T21:10:50.467 に答える
0

Randy として、私が見つけた最善の解決策は、checked プロパティを別の属性に格納し、移動後、checked プロパティをラジオ入力に戻すことでした。次のように、並べ替え可能な start パラメーターと stop パラメーターを使用して、より簡単な方法でそれを行いました。

// 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();

ロドリゴ

于 2016-12-01T22:44:34.763 に答える
0

私は同じ問題をたくさん抱えていましたが、ここで解決策を見つけました: 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');
}
于 2014-10-09T17:01:21.570 に答える