如何同時拖動兩個div - jQuery可排序

我有3個div，我正在使用JQuery可排序插件。它工作正常，但問題是我已經在第一Div的右下角放置了另一個小格子（黑色），我想要的是，當我將第一個div拖動到任何位置時，小格子也會拖動它。下面的代碼，如何同時拖動兩個div - jQuery可排序

HTML

<!DOCTYPE html> 
     <html lang="eng"> 
     <head> 
    <title>Drag 2 divs same time</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> 
    <link rel="stylesheet" type="text/css" src="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" ></script> 
    <script src="http://code.jquery.com/jquery-1.9.1.js" ></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" ></script> 
    <link rel="stylesheet" type="text/css" href="css.css"> 
     </head> 
<body> 
<div id="wrapper"> 
<div id="div1" > Div 1</div> 
<div id= "small"></div> 
<div id="div2" > Div 2</div> 
<div id="div3" > Div 3</div> 
</div> 
<script> 
$('#wrapper').sortable({ cancel: "#small"}); 
$('#wrapper').disableSelection(); 
</script> 
</body> 
</html>

CSS

#div2{ 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    float: left; 
    margin-left: 5px; 
} 
#div1{ 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    float: left; 
    margin-left: 5px; 
} 
#div3{ 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    float: left; 
    margin-left: 5px; 
} 
#small{ 
    width:25px; 
    height: 25px; 
    background-color: black; 
    position: absolute; 
    left: 88px; 
    top: 83px; 
}

來源

2013-05-09 Ahmed Ali

只是一個提示：[disableSelection（）]（http://api.jqueryui.com/disableSelection/）在v 1.9中已被棄用，並且您不會將其用作文檔狀態。 – SirDerpington 2013-05-09 13:32:04

可能是css定位可以幫助你。 – 2013-05-09 13:58:58

嘗試把小格的實際DIV中：

<div id="wrapper"> 
    <div id="div1" > Div 1 
    <div id= "small"></div> 
    </div> 
    <div id="div2" > Div 2</div> 
    <div id="div3" > Div 3</div> 
</div>

http://jsfiddle.net/vrc9Y/

來源

2013-05-09 04:36:11

是的，我試過了，但我想小div是外部div。 – 2013-05-09 04:45:47

你能解釋一下你想要小格子做什麼嗎？你是否希望它始終保持在div1的右下角？ – 2013-05-09 04:49:59

是的，我希望它堅持div1 – 2013-05-09 05:31:08

如何同時拖動兩個div - jQuery可排序

回答

相關問題