拖動的元素 - JQuery用戶界面

Question

jQuery代碼：

$("#order").draggable(); 

HTML：

<div class="row" style="width: 100%"> 
     <div class="col-md-4" style="width: 20%; min-width: 100px;"> 
      <div id="order" class="ui-draggable ui-draggable-handle" style="position: relative; left: 0px; top: 20px;"> 
       <div class="panel-body"> 
        <div> 
         <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> 
         <strong>Example delivery address</strong> 
        </div> 

        <div> 
         <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> 
         Phone number: <strong>+372 00000001</strong> 
        </div> 

        <div> 
         <span class="glyphicon glyphicon-time" aria-hidden="true"></span> 
         Ordered at: <strong>2015-10-01 20:53:56.219</strong> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <h3>Operator Orders</h3> 
     </div> 
    </div> 

目前，我可以將元素ID爲 「訂單」 任何地方，但我想使元素只之間拖動「col-md-4」div元素。我怎樣才能達到這個結果？有什麼建議麼？

Answer 1

基於您的代碼，我會說你需要使用

$("#order").draggable({ containment: ".row", scroll: false }); 

行看起來像真正的容器。此外，您將需要添加一些捕捉和一些stop (Drop) event處理，這將是真正的工作。

col-md-4將需要droppables。
我加了一些白色的空間，部分邊界來說明boundries

$("#order").draggable({ 
 
    containment: ".row", 
 
    scroll: false, 
 
    revert: "invalid" 
 
}); 
 

 
$(".col-md-4").droppable({ 
 
    activeClass: "ui-state-default", 
 
    hoverClass: "ui-state-hover", 
 
    drop: function(event, ui) { 
 
    $(this) 
 
     .addClass("ui-state-highlight") 
 
     .find("p") 
 
     .html("Dropped!"); 
 
    } 
 
});

div { 
 
    border: 1px solid black; 
 
} 
 
.col-md-4 { 
 
    border: 1px solid cyan; 
 
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 

 

 
<div class="row" style="width: 100%"> 
 
    <div class="col-md-4" style="width: 20%; min-width: 100px; background-color:yellow;"> 
 
    <div id="order" class="ui-draggable ui-draggable-handle" style="position: relative; left: 0px; top: 20px;"> 
 
     <div class="panel-body"> 
 
     <div> <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> 
 
      <strong>Example delivery address</strong> 
 

 
     </div> 
 
     <div> <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> 
 
      Phone number: <strong>+372 00000001</strong> 
 

 
     </div> 
 
     <div> <span class="glyphicon glyphicon-time" aria-hidden="true"></span> 
 
      Ordered at: <strong>2015-10-01 20:53:56.219</strong> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    <br><br><br><br><br><br> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <h3>Operator Orders</h3> 
 
    <br><br><br><br><br><br> 
 
    </div> 
 
</div>