1. Zuhause
  2. Frage und Antwort
  3. Auswahl von Optionsfeldern beim Ziehen von Elementen mit jQuery Sortierfunktionen

Auswahl von Optionsfeldern beim Ziehen von Elementen mit jQuery Sortierfunktionen

2008-11-12 11 views
6

Ich verwende das jQuery UI sortables Plugin, um die Neuordnung einiger Listenelemente zu ermöglichen. Innerhalb jedes Listeneintrags habe ich ein paar Optionsfelder, mit denen das Element aktiviert oder deaktiviert werden kann.Auswahl von Optionsfeldern beim Ziehen von Elementen mit jQuery Sortierfunktionen

Wenn das Element gezogen wird, werden beide Optionsfelder deaktiviert, was nicht so aussieht, als würde es passieren. Ist das richtiges Verhalten, und wenn nicht, was ist der beste Weg, um dies zu umgehen?

Hier ist ein Codebeispiel dieses Problem zu demonstrieren:

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

Sobald ein Listenelement mit der Maus gepackt wird, werden sowohl die Radio-Buttons deaktiviert lassen.

Wenn dies ein Fehler ist, wäre eine Problemumgehung, das Optionsfeld "aktiviert" automatisch auszuwählen, wenn das Objekt verschoben wird.

Update: Ich habe dies in FireFox 3, Internet Explorer 7, Opera 9.5 und Safari 3.1.2 getestet, alle auf Windows XP x64, und dieses Problem tritt in allen von ihnen auf.

Quelle

2008-11-12 Mun

Antwort

1

Es kann nicht genau das, was Sie suchen, aber

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

zu

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

behält die Optionsfeldauswahl bei.

Quelle

2008-11-14 17:05:56

+0

Versuchte in FF3, IE7 und Chrome und funktioniert auf die gleiche. Optionsfelder sind gelöscht (FF und Chrom) oder zurückgesetzt (IE7) – Serxipc

+0

Es sieht aus wie es von Ihrer Version von jquery.ui abhängt. Ich bekomme die gleichen Ergebnisse wie Sie, wenn ich 1.5.2 benutze, aber ich bekomme genau das Gegenteil mit 1.6rc2 (Radio-Buttons in FF und Chrom mit Helfer gelöscht und persistieren mit Platzhalter.) IE scheint nicht so oder so für mich arbeiten entweder. –

+0

Sie haben Recht. Bei 1.6rc2 wird standardmäßig das Element innerHtml in den Platzhalter kopiert. Wenn Sie die Platzhalteroption auf eine beliebige nicht leere Zeichenfolge setzen, wird dieses Verhalten überschrieben. – Serxipc

1

UPDATE: Dies gilt für jQuery.ui 1.5.2. Wenn Sie 1.6rc2 verwenden, versuchen Sie Ben Koehler Lösung.

Es scheint, dass das Sortierbar-Plugin den Knoten, der verschoben wird, klont. Wenn wir die Knoten mit $('#itemlist li').clone().appendTo("#itemlist"); klonen, sehen wir ein ähnliches Verhalten, denn jetzt gibt es 4 Optionsfelder mit demselben Namen anstelle von zwei.

Sie können die Funktionsweise des Sorables-Plugins mit der Hilfsoption überschreiben. Versuchen Sie folgendes:

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

Wir erstellen einen neuen Knoten ohne Optionsfelder und fügen es an die Liste an. Dieser neue Knoten wird derjenige sein, der animiert ist.
Dieser Code funktioniert in FF3 und Chrome, aber IE7 setzt die Optionsfelder immer auf den Standardzustand zurück.

Quelle

2008-11-17 09:13:40 Serxipc

0

ich irgendwo hineingezogen zu werden hatte eine Menge der gleichen Probleme, aber ich habe hier eine Lösung gefunden: http://fiddyp.co.uk/how-to-fix-radio-inputs-losing-focus-when-dragging-a-jquery-ui-sortable-div/ Dies scheint mir zu ermöglichen, die Tabellenzeilen zu ziehen und zu löschen, und die Optionsfelder bleiben korrekt an Ort und Stelle.

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

Quelle

2014-10-09 17:01:21

0

Als Randy, die beste Lösung, ich fand, war die Eigenschaft checked in einem anderen Attribute zu speichern und dann, nach dem Umzug der geprüfte Eigenschaft auf den Radioeingang zurück. Ich habe das auf eine einfachere Art und Weise gemacht, indem ich die sortierbaren Start- und Stop-Parameter verwende, wie es folgt.

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

Quelle

2016-12-01 22:44:34 Rodrigo

 Verwandte Themen

  • Keine verwandten Themen^_^