jak przeciągnąć z przewijanego elementu div do obiektu droppable, a następnie przeciągnąć ponownie?

Mam przewijaną listę po lewej stronie (przepełnienie: auto) i kilka droppables po prawej stronie. Znalazłem obejście pozwalające na przeciągnięcie elementu z listy do kontenera przy użyciu klonu here, ale po upuszczeniu elementu otrzymuje on pozycję: bezwzględną, a górną i prawą pozycję dodaje do stylu śródliniowego wraz z indeksem Z który był tam pierwotnie. Wszystkie inne klasy dołączone są w kopii, tylko po przeciągnięciu i upuszczeniu tego elementu nie można przeciągnąć ponownie?jak przeciągnąć z przewijanego elementu div do obiektu droppable, a następnie przeciągnąć ponownie?

Czy istnieje sposób na zrobienie tego lub usunięcie stylu wstawianego dodanego w procesie klonowania?

Uproszczony kod pokazujący problem został przedstawiony poniżej - powinieneś być w stanie po prostu wyciąć i wkleić stronę i upuścić webroot, aby go przetestować. Z góry dziękuję.

<!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> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script> 

<script> 
    $(document).ready(function() { 
    var dropped = false; 
    $(".container").droppable({ 
    drop: function(event, ui) { 
      dropped = true; 
      $.ui.ddmanager.current.cancelHelperRemoval = true; 
      ui.helper.appendTo(this); 
    } 
}); 
$(".item").draggable({ 
    revert: 'invalid', 
    helper: function(){ 
     $copy = $(this).clone(); 
     return $copy; 
    }, 
     start: function(event, ui) { 
        dropped = false; 
        $(this).addClass("hide"); 
       }, 
       stop: function(event, ui) { 
        if (dropped==true) { 
         $(this).remove(); 
        } else { 
         $(this).removeClass("hide"); 
        } 
       } 
     }); 
    }); 
    </script> 

    <style> 
    .scrollable { 
     margin-top:5px; 
     float:left; 
    height:140px; 
    width:60px; 
    overflow:auto; 
} 

.container { 
    height: 140px; 
    width: 160px; 
    float:left; 
    border:3px solid black; 
    margin:5px; 
} 

.item { 
    float:left; 
    height:40px; 
    width:40px; 
} 

.red {background-color: red; } 
.black {background-color: black;color: white;} 
.green {background-color: green;} 
.blue {background-color: blue; color: white;} 
.yellow {background-color: yellow;} 

</style> 
</head> 

<body> 
    <div id="list" class="scrollable"> 
    <div id="p1" class="item red">A</div> 
    <div id="p2" class="item black">B</div> 
    <div id="p3" class="item green">C</div> 
    <div id="p4" class="item blue">D</div> 
    <div id="p5" class="item yellow">E</div> 
    </div> 
    <div> 
    <div id="c1" class="container"></div> 
    <div id="c2" class="container"></div> 
    <div id="c3" class="container"></div> 
    </div> 
</body>

Źródło

2011-10-10 Trevor North

Jak miałaś w stanie rozwiązać ten problem i nikt do tej pory sugestia, I wprowadziły tymczasowe rozwiązanie, które ma tworzyć div z PageUp i PageDn przycisków i pozwolić użytkownikowi na przewijanie listy ręcznie. Wyświetlam tylko N wierszy i implementuję własną paginację za pomocą funkcji limit w select od mysql. Oznacza to, że DIV nie musi implementować przepełnienia: auto i daje rozwiązanie tymczasowe. Będę eksperymentować i publikować własne rozwiązanie, jeśli znajdę kogoś, a nikt inny niczego nie zasugeruje. TIA. –

W metodzie przeciągania, wziąłem sklonowany element i uczyniłem go przeciągalnym.

stop: function(event, ui) { 
     if (dropped==true) { 
      $(this).remove(); 
     } else { 
      $(this).removeClass("hide"); 
     } 
     $('#'+$(this).attr('id')).draggable({revert: 'invalid'}); 
    }

Gdy element przeciąganie klonuje, zachowuje klasę „UI-przeciągany”, ale to nie wystarczy, aby przeciągać. To musi być odbicie.

http://jsfiddle.net/CMYzw/

Źródło

2011-10-16 13:18:12

Mam już funkcję jquery, która stosuje przeciągane przy użyciu selektora (klasa dołączona do div), który jest uruchamiany na Ladad i próbowałem uruchomić to ponownie, gdy strona została odświeżona z ajax, ale nie działa. Nie myślałem, aby spróbować umieścić go w funkcji stop, więc spróbuję. Wielkie dzięki. –

jak przeciągnąć z przewijanego elementu div do obiektu droppable, a następnie przeciągnąć ponownie?

Odpowiedz

Powiązane problemy