Nasıl bir eleman yapabilirim, ör. jQuery kullanarak bir div, sürüklenebilir?jQuery'de bir öğeyi nasıl sürükleyebilirim?
cevap
İlk yük jQuery UI:
<link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
Ardından kullanmak jQuery UI draggable method: Sen jquery UI olmadan, sadece jquery ile yapabileceğiniz
<script type="text/javascript">
$(function() {
$("#b").draggable();
});
</script>
:
function handle_mousedown(e){
window.my_dragging = {};
my_dragging.pageX0 = e.pageX;
my_dragging.pageY0 = e.pageY;
my_dragging.elem = this;
my_dragging.offset0 = $(this).offset();
function handle_dragging(e){
var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
$(my_dragging.elem)
.offset({top: top, left: left});
}
function handle_mouseup(e){
$('body')
.off('mousemove', handle_dragging)
.off('mouseup', handle_mouseup);
}
$('body')
.on('mouseup', handle_mouseup)
.on('mousemove', handle_dragging);
}
$('#b').mousedown(handle_mousedown);
Bu, ek bir eklenti gerektirmediğinden kabul edilen yanıt olmalıdır. – BFWebAdmin
@BFWebAdmin mutlaka soru açıkça/özellikle jquery için sorar çünkü .. – MJB
@MJB - Ek eklenti, ben ayrı olarak yüklenmesi gereken jQuery UI demek. – BFWebAdmin
Sadece Bu kadar tüm jQuery UI "sürükleyerek" yerine çok taşınabilir onun pişmiş.
Aşağıda sürüklerken metin seçmez, bu aslında burada diğer kodun aksine üretimde çalışır.
Eğer
$.fn.draggable = function(){
var $this = this,
ns = 'draggable_'+(Math.random()+'').replace('.',''),
mm = 'mousemove.'+ns,
mu = 'mouseup.'+ns,
$w = $(window),
isFixed = ($this.css('position') === 'fixed'),
adjX = 0, adjY = 0;
$this.mousedown(function(ev){
var pos = $this.offset();
if (isFixed) {
adjX = $w.scrollLeft(); adjY = $w.scrollTop();
}
var ox = (ev.pageX - pos.left), oy = (ev.pageY - pos.top);
$this.data(ns,{ x : ox, y: oy });
$w.on(mm, function(ev){
ev.preventDefault();
ev.stopPropagation();
if (isFixed) {
adjX = $w.scrollLeft(); adjY = $w.scrollTop();
}
var offset = $this.data(ns);
$this.css({left: ev.pageX - adjX - offset.x, top: ev.pageY - adjY - offset.y});
});
$w.on(mu, function(){
$w.off(mm + ' ' + mu).removeData(ns);
});
});
return this;
};
"dock" böylece bu da oldukça güzel sabit konumlandırılmış elemanları ile çalışır Ama bu mutlak varsayar veya sabit konumlandırma zaten elemana uygulanır.
şöyle kullanın:$('#something').draggable();
Bu FYI kullanılmasını önermiyorum. Sürüklenebilir durumda MDN'ye bakın ve yerel tarayıcı yolunu kullanın. –
benim için iyi çalışıyor! – foreyez
- 1. Liste görünümü öğesini diğer sekmeye nasıl sürükleyebilirim?
- 2. Java: JTable'dan yerel dosya sistemine nasıl dosya sürükleyebilirim?
- 3. Bir öğeyi bir menüden diğerine nasıl taşıyabilirim?
- 4. Clojure'deki bir öğedeki bir öğeyi nasıl güncelleyebilirim?
- 5. Başka bir öğeyi yalnızca genişletirken bir öğeyi daralt css
- 6. Dizideki X öğesindeki bir öğeyi nasıl silebilirim?
- 7. Xamarin.Forms - bir öğeyi sayfada kesinlikle nasıl ortalarsınız?
- 8. WPF ListBox'ta bir öğeyi yazarak nasıl bulabilirim?
- 9. Her diğer öğeyi bir listede nasıl bulurum?
- 10. Bir öğeyi wpf'deki önden nasıl getirebilirim?
- 11. jQuery'de, gizli bir öğeyi nasıl seçebilirim?
- 12. YUI'deki bir öğeyi jQuery'de nasıl gösterir/gizlerim?
- 13. es6 dizisindeki bir öğeyi nasıl güncellersiniz?
- 14. Listedeki bir öğeyi taşıyın mı?
- 15. Javascript dizideki bir öğeyi hedefler
- 16. Bir öğeyi Html.ActionLink ile sarmak ..?
- 17. Bir öğeyi animasyonla döndürmeniz ve
- 18. WPF'de sürüklenen öğeyi nasıl gösteririm?
- 19. Seçilen öğeyi QListWidget'de nasıl ayarlayabilirim?
- 20. ReactJS'deki bir tıklama etkinliğiyle bir listeden bir öğeyi nasıl kaldırabilirsiniz?
- 21. Sondan bir önceki öğeyi alın
- 22. Recycler tek bir öğeyi görüntülüyor
- 23. ruby Diziden bir öğeyi kaldırın
- 24. Python'daki bir dizideki bir öğeden yalnızca öğeyi nasıl seçersiniz
- 25. Bir dizideki her bir öğeyi PHP ile nasıl kolayca çoğaltabilirim?
- 26. Bir tarayıcının takılı bir öğeyi boyamayı bitirdiğinde nasıl belirlenir?
- 27. Bir sınıftaki bir öğeyi daha az kullanarak nasıl hedefleyebilirim?
- 28. Bir iOS aygıtı döndüğünde, yönlendirmeyi yalnızca bir öğeyi nasıl değiştirebilirim?
- 29. Belirli bir öğeyi RethinkDB'deki yerleşik bir diziden nasıl kaldırırım?
- 30. Python'da tekrarlanan bir protobuf alanından bir öğeyi nasıl kaldırabilirim?
jQueryUI onun arka uç düzgün yıllarda güncellenmiş ve şimdi sık sık yan diğer uygulama geliştirme boyunca temiz bir şekilde çalışan sorunları vardır olmamıştır. Bunun nedeni jqueryUI'nin en yeni sürümünün jquery v1.7.x olmasını gerektirmesidir. Burada jQuery'nin kendisi bu yorumun olduğu zamandan itibaren v3.2.1 üzerindedir. – Nosajimiki