jquery - 在父 div 中拖放

Question

我必须在其父 div 中拖动搜索框，例如：-

父 div 子 div

我必须在父 div 中拖动子 div

请建议一些链接或答案

Answer 1

jQuery UI Draggable具有您需要的功能。所以，基本上你需要有一个父母.parent和一个可拖动的孩子，.child.

<div class="parent">
    <div class="child">Drag Me!</div>
</div>

然后调用该脚本，并确保将containment: "parent"其包含在其父级中：

$(function() {
    $( ".child" ).draggable({ containment: "parent" });
});

要查看运动，您可以添加一些边框和高度。

.parent {width: 200px; height: 200px; border: 1px solid #999;}
.child {width: 50px; height: 50px; border: 1px solid #ccc;}

小提琴：http: //jsfiddle.net/praveenscience/B2akk/

---

对于您的 HTML，父级是#parent，可拖动的子级是#search.

<div id="parent">
    <div id="search"> </div>
</div>

相同的 jQuery 代码将是：

$(function() {
    $( "#search" ).draggable({ containment: "#parent" });
});

小提琴：http: //jsfiddle.net/praveenscience/ds4pv/