CODEWITHSUNDEEP
jqueryjquery-ui
fishera
fishera

Reputation: 799

Drag element in another div - JQuery UI

JQuery code:

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

Currently I can drag element with id "order" anywhere but I want to make element draggable only between "col-md-4" div elements. How can I achieve this result? Any suggestions?

Upvotes: 1

Views: 585

Answers (1)

Joe Johnston
Joe Johnston

Reputation: 2936

Based on your code I would say you need to use 

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

row looks like the real container. Additionally you will need to add some snapping and some stop (Drop) event handling that will be the real work.

The col-md-4's will need to be droppables.
I added some white space and some borders to illustrate the 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>

Upvotes: 1

Related Questions