[英]Drag multiple elements with jquery.event.drag
我想用jQuery插件jquery.event.drag拖動多個元素
這是原始演示的鏈接:
在演示中,用戶點擊他想要選擇的方塊並拖動它們。
但我想做一些最簡單的事情:只需點擊方塊“1”並移動所有方塊。
我嘗試了不同的東西,結果並不好,看到這個小提琴:
http://jsfiddle.net/Vinyl/gVFCL/2/
你能幫那我嗎?
HTML代碼:
<div class="drag" style="left:20px;"></div>
<div class="drag" style="left:100px;"></div>
<div class="drag" style="left:180px;"></div>
CSS代碼
.drag {
position: absolute;
border: 1px solid #89B;
background: #BCE;
height: 58px;
width: 58px;
cursor: move;
top: 120px;
}
.selected {
background-color: #ECB;
border-color: #B98;
}
jQuery的
jQuery(function($){
$('.drag')
.click(function(){
$( this ).toggleClass("selected");
})
.drag("init",function(){
if ( $( this ).is('.selected') )
return $('.selected');
})
.drag(function( ev, dd ){
$( this ).css({
top: dd.offsetY,
left: dd.offsetX
});
});
});
編輯Rajagopal答案中給出的鏈接是可以的。 我也發現這個插件MultiDraggable很容易使用: https : //github.com/someshwara/MultiDraggable
jQuery(function($) {
$('.drag').drag("init", function() {
if ($(this).is('#test')){
return $('.selected');
}
}).drag(function(ev, dd) {
$( this ).css({
top: dd.offsetY,
left: dd.offsetX
});
});
});
你必須做這樣的事情,
$('.drag').drag("init", function(ev, dd) {
if (this.id == "test") {
return $(".drag").addClass("selected");
}
}).drag(function(ev, dd) {
if (ev.target.id == "test") {
$(this).css({
top: dd.offsetY,
left: dd.offsetX
});
}
});
這是工作樣本 。 希望,這一個會幫助你。
編輯:
您可以在這種情況下使用jquery-ui draggable插件。 看看這個http://jqfaq.com/how-to-drag-the-multiple-elements-with-jquery-ui-draggable/ 。 Hoep,這個會幫到你!
我的代碼升級了多拖和多選:
$('.drag').drag("init", function() {
return $('.selected');
}).drag(function(ev, dd) {
$( this ).css({
top: dd.offsetY,
left: dd.offsetX
});
});
$('div[class*="drag"]').click(function(){
$(this).toggleClass("selected");
})
在原來的jsfiddle變化
.click(function(){
$(this).toggleClass("selected");
})
至
.click(function(){
$('.drag').toggleClass("selected");
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.