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为“order”的元素，但我想只在“col-md-4”div元素之间使元素可拖动。我怎样才能达到这个效果？有什么建议？

Answer 1

根据您的代码我会说您需要使用

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

行看起来像真正的容器。此外，您还需要添加一些捕捉和一些stop (Drop) event处理，这将是真正的工作。

col-md-4 需要droppables。
我添加了一些空白区域和一些边框来说明边界

$("#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>

拖动另一个div中的元素 - JQuery UI

1 个答案: