При перетаскивании элемента с помощью jQuery Sortables кнопки радио отключаются - PullRequest
Новая
       19

При перетаскивании элемента с помощью jQuery Sortables кнопки радио отключаются

6 голосов
/ 12 ноября 2008

Я использую плагин 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, и эта проблема возникает во всех из них.

Ответы [ 6 ]

1 голос
/ 17 ноября 2008

ОБНОВЛЕНИЕ: это относится к jQuery.ui 1.5.2. Если вы используете 1.6rc2, попробуйте решение Ben Koehler.

Кажется, что плагин sortables клонирует перемещаемый узел. Если мы клонируем узлы, используя $('#itemlist li').clone().appendTo("#itemlist");, мы увидим похожее поведение, потому что теперь есть четыре переключателя с одинаковым именем вместо двух.

Вы можете переопределить способ работы плагина sortables с опцией helper. Попробуйте это: 

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

Мы создаем новый узел без переключателей и добавляем его в список. Этот новый узел будет анимированным.
Этот код отлично работает в FF3 и Chrome, но IE7 продолжает сбрасывать переключатели в состояние по умолчанию.

1 голос
/ 14 ноября 2008

Это может быть не совсем то, что вы ищете, но меняется 

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

до 

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

сохраняет выбор радиокнопок.

0 голосов
/ 02 декабря 2016

Как Рэнди, лучшее решение, которое я нашел, было сохранить свойство selected в другом атрибуте, а затем, после переезда, вернуть свойство selected на радиовход. Я сделал это проще, используя сортируемые параметры запуска и остановки, как показано ниже. 

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

Rodrigo

0 голосов
/ 09 октября 2014

У меня было много таких же проблем, но я нашел решение здесь: 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');
}
0 голосов
/ 23 июля 2011

какой-то ответ на потерю статуса переключателей здесь http://core.trac.wordpress.org/ticket/16972#comment:4

это немного долгий путь, но единственный способ найти состояние переключателей после перетаскивания куда-то

0 голосов
/ 13 ноября 2008

Это в Internet Explorer? IE, как известно, теряет выбор флажков и радио при копировании / перемещении.

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

defaultChecked необходимо сбросить, чтобы IE работал

...