Sortierbare Klon Helfer funktioniert nicht

Vielleicht verstehe ich nicht, wie Klon mit sortierbar funktioniert, aber hier ist, was ich tun möchte.Sortierbare Klon Helfer funktioniert nicht

Wenn ich einen Artikel sortiere, möchte ich einen Klon des Artikels, den ich ziehe, bleiben, bis ich den Artikel an seiner neuen Position verlasse.

Hier ist der Code:

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 

    <style type="text/css"> 
     .sort { width: 150px; } 
     .ui-state-highlight { background-color: #000; height:2px; } 
    </style> 
</head> 
<body> 
    <div> 
     <ul class="sort"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
     </ul> 
    </div> 

    <script type="text/javascript"> 
     $(function() { 
      $('.sort').sortable({ 
       helper: 'clone', 
       placeholder: 'ui-state-highlight', 
       opacity: '.5' 
      }) 
     }) 
    </script> 
</body> 
</html>

Vielen Dank im Voraus für die Hilfe!

Quelle

2010-06-11 Jeremy Seekamp

Wenn Sie die Klon-Option verwenden, wird das ursprüngliche Element mit style="display: none" ausgeblendet, wenn Sie mit dem Ziehen beginnen. Sie könnten einen Handler an das Sortierereignis anhängen (oder an ein anderes Ereignis, das das ursprüngliche Element verbirgt), um es erneut anzuzeigen. Alles sollte dann für dich arbeiten.

P.S. Ich habe Firebug verwendet, um zu sehen, was mit dem ursprünglichen Element geschah. Wenn du es nicht benutzt, solltest du es wirklich sein!

Quelle

2010-06-11 17:21:56

Während es das Problem, das Sie haben, nicht beheben kann. Am Ende Ihrer Parameter befindet sich ein zusätzliches Komma.

opacity: '.5',

Quelle

2010-06-11 17:15:29 Mike

Es ist nur eine Möglichkeit, es zu hacken. Sie können von hier aus führen. Ändern Sie Ihre Konfiguration wie folgt.

 $('.sort').sortable({ 
      helper: 'clone', 
      placeholder: 'ui-state-highlight', 
      opacity: '.5', 
      start: function(event, ui) { 
       $('.sort').find('li:hidden').show(); 
      } 
     })

Quelle

2010-06-11 19:00:53 simplyharsh

+11

$ (ui.item) .show() würde mehr 'genau' – Vigrond

und $ (ui.helper) sein enthält die geklonte Helfer. Wenn Sie es ändern möchten. – Armin

Ich habe zwei Listen, sortable1 und sortable2. Ich möchte Objekte von Sortierbar1 nach Sortierbar2 und umgekehrt klonen.

Eine Verbesserung muss sein, um zu prüfen, ob es das oberste Element ist, wenn es ist. prev() wird nicht funktionieren. Überprüfen Sie, ob es ein prev gibt, wenn nicht nach().

Meine Lösung war:

$("#sortable1").sortable({ 
     helper:"clone", 
     connectWith: "#sortable2", 
     start:function(event,ui){ 
      $(ui.item).show(); 
      clone = $(ui.item).clone(); 
      before = $(ui.item).prev(); 
     }, 
     stop:function(event, ui){ 
      before.after(clone); 
     } 
    }).disableSelection(); 
$("#sortable2").sortable({ 
     helper:"clone", 
     connectWith: "#sortable1", 
     start: function(event, ui){ 
      $(ui.item).show(); 
      clone = $(ui.item).clone(); 
      before = $(ui.item).prev(); 
     }, 
     stop:function(event, ui){ 
      before.after(clone); 
     } 
    }).disableSelection();

Quelle

2011-06-21 13:11:00

Ein paar Worte über Verbesserungen, die John Bledsoe sagte. Für erste Elemente in # sortable1 Klonen verwende ich einen solchen Code:

stop:function(event, ui){ 
     if (before.length) before.after(clone); 
     else $(this).prepend(clone); 
    },

Quelle

2017-10-31 20:33:13

Sortierbare Klon Helfer funktioniert nicht

Antwort

Verwandte Themen