Kaydırılabilir bir div den sürüklenebilir bir sürüme nasıl sürüklenir ve sonra yeniden sürükleyin?

Sayfanın sol tarafında kaydırılabilir bir liste var (taşma: otomatik) ve sayfanın sağında birkaç damlalık var. here klonunu kullanarak bir öğenin bir kapsayıcıya sürüklenmesine izin vermek için bir geçici çözüm buldum, ancak öğe düştüğünde, pozisyon alıyor: mutlak ve z-endeksi ile birlikte bir satır içi stile eklenen bir üst ve sağ konum orjinal olarak oradaydı. Eklenen tüm diğer sınıflar kopyada, sadece sürükle ve bırak işleminden sonra bu öğe tekrar sürüklenemez mi?Kaydırılabilir bir div den sürüklenebilir bir sürüme nasıl sürüklenir ve sonra yeniden sürükleyin?

Bunu yapmak veya klonlama işlemi tarafından eklenen satır içi stilini kaldırmak için bir yol var mı?

Sorunu gösteren basitleştirilmiş kod aşağıda gösterilmiştir - sadece bir sayfaya kesip yapıştırabilmeniz ve test etmek için webroot'unuza bırakabilmeniz gerekir. Şimdiden teşekkürler.

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

kaynak

2011-10-10 Trevor North

manuel. Sadece N satırlarını gösteriyorum ve mysql'den seçili sınır işlevini kullanarak kendi sayfalama işlemimi gerçekleştiriyorum. Bu, DIV'nin taşma uygulamasını gerektirmediği anlamına gelir: otomatik ve geçici bir çözüm sağlar. Bir tane bulursam ve başka hiçbir şey öneremediğimde kendi çözümümü deneyip deneyeceğim. TIA. –

Sürüklenebilir durma yönteminizde, klonlanmış öğeyi alıp sürüklenebilir yaptım. sürükleme elemanı klonlanmış edildiğinde

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

, bu "ui-sürüklenebilir" sınıfı korur, ama bu sürüklenebilir hale getirmek için yeterli değil. Ribaund olmalı. ben bu çözmek mümkün sığınak ve kimse şimdiye kadar bir öneri, ben listesinde gezinmek için kullanıcı PageUp ve PageDn düğmeleri ile bir div oluşturmak ve izin vermektir geçici bir çözüm uygulamış olduğu gibi

http://jsfiddle.net/CMYzw/

kaynak

2011-10-16 13:18:12

Zaten bir jQuery işlevi var, bir sürücü kullanarak (Sel'e bağlı bir sınıf) sürüklenen ve Lja ile yenilendikten sonra bir kez daha çalıştırmayı denedim ama çalışmadı. Denemeye çalışmayı denemedim ve bu yüzden denemeliyim. Çok teşekkürler. –

Kaydırılabilir bir div den sürüklenebilir bir sürüme nasıl sürüklenir ve sonra yeniden sürükleyin?

cevap

İlgili konular