1. Accueil
  2. Question et réponse
  3. Les boutons radio sont désélectionnés lorsque vous faites glisser l'élément à l'aide de jQuery Sortables

Les boutons radio sont désélectionnés lorsque vous faites glisser l'élément à l'aide de jQuery Sortables

2008-11-12 31 views
6

J'utilise le plug-in jQuery UI sortables pour autoriser la réorganisation de certains éléments de la liste. À l'intérieur de chaque élément de la liste, j'ai quelques boutons radio qui permettent à l'élément d'être activé ou désactivé.Les boutons radio sont désélectionnés lorsque vous faites glisser l'élément à l'aide de jQuery Sortables

Lorsque l'élément est déplacé, les deux boutons radio sont désélectionnés, ce qui ne semble pas être le cas. Est-ce un comportement correct, et sinon, quelle est la meilleure façon de contourner cela?

Voici un exemple de code montrant ce problème:

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

Dès qu'un élément de la liste est saisi avec la souris, les deux boutons radio se décochées. Si cela est un bug, une solution de contournement consisterait à sélectionner automatiquement le bouton d'option 'enabled' lorsque l'élément est déplacé, donc tout conseil sur la façon d'y parvenir serait également très apprécié. Mise à jour: J'ai testé cela dans FireFox 3, Internet Explorer 7, Opera 9.5 et Safari 3.1.2, tous sur Windows XP x64, et ce problème se produit dans chacun d'entre eux.

Source

2008-11-12 Mun

Répondre

1

Il ne peut pas être exactement ce que vous cherchez, mais en changeant

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

à

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

conserve les sélections des boutons radio.

Source

2008-11-14 17:05:56

+0

goûtés FF3, IE7 et Chrome et fonctionne de la même. Les boutons radio sont effacés (FF et chrome) ou réinitialisés (IE7) – Serxipc

+0

Il semblerait que cela dépende de votre version de jquery.ui. J'obtiens les mêmes résultats que toi quand j'utilise 1.5.2, mais j'obtiens juste le contraire avec 1.6rc2 (boutons radio effacés en FF et chrome en utilisant helper et persiste en utilisant un espace réservé). IE ne semble pas fonctionner de toute façon pour moi non plus. –

+0

Vous avez raison. Avec 1.6rc2, la valeur par défaut est de copier l'élément innerHtml dans l'espace réservé. La définition de l'option d'espace réservé sur une chaîne non vide remplace ce comportement. – Serxipc

1

MISE À JOUR: Ceci s'applique à jQuery.ui 1.5.2. Si vous utilisez 1.6rc2, essayez la solution Ben Koehler.

Il semble que le plugin sortables clone le noeud en cours de déplacement. Si nous clonons les noeuds en utilisant $('#itemlist li').clone().appendTo("#itemlist");, nous verrons un comportement similaire, car maintenant il y a 4 boutons radio avec le même nom, au lieu de deux.

Vous pouvez remplacer la manière dont le plugin sortables fonctionne avec l'option d'assistance. Essayez ceci:

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

Nous créons un nouveau nœud sans boutons radio et l'ajoute à la liste. Ce nouveau noeud sera celui qui est animé.
Ce code fonctionne très bien dans FF3 et Chrome, mais IE7 continue à rétablir les boutons radio à son état par défaut.

Source

2008-11-17 09:13:40 Serxipc

0

I J'ai eu beaucoup de problèmes, mais j'ai trouvé une solution ici: http://fiddyp.co.uk/how-to-fix-radio-inputs-losing-focus-when-dragging-a-jquery-ui-sortable-div/ Cela semble me permettre de glisser et déposer les lignes de la table, et les boutons radio restent en place correctement.

// 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'); 
}

Source

2014-10-09 17:01:21

0

Comme Randy, la meilleure solution que j'ai trouvé pour stocker la propriété dans un autre attribut contrôlé puis, après le déménagement revenir vérifier la propriété à l'entrée de la radio. Je l'ai fait d'une manière plus simple, en utilisant les paramètres de démarrage et d'arrêt triable, comme il suit.

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

Source

2016-12-01 22:44:34 Rodrigo

 Questions connexes

  • Aucun problème connexe^_^