Question

我有一个html文件，可以将一个图像放在另一个图像的上面。但是我希望叠加的图像可以被用户拖动，限制在底层图像的边界内。任何人都可以提供建议吗？

<xs:complexType name="Test">
 <xs:choise>
  <xs:element name="TCode" type="TestCode" minOccurs="1" maxOccurs="1" />
  <xs:element name="TValue" type="TestValue" minOccurs="1" maxOccurs="1" />
 </xs:choise>
</xs:complexType>

Answer 1

你只需要使用jQuery UI中的draggable功能。

$(document).ready(function () {

    $(function () {
        $("#draggable").draggable();
    });

});

这是一个有效的例子：

https://jsfiddle.net/rv8kcjqd/

Answer 2

你可以使用允许你定义jQueryUI Draggable Widget的containment setting，它不允许移动到边界框之外。

这是一个小例子：

＆＃13;

$(function() {
  $("#draggable3").draggable({ containment: "#containment-wrapper", scroll: false });
});

＆＃13;

.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="containment-wrapper">
  <div id="draggable3" class="draggable ui-widget-content">
    <p>I'm contained within the box</p>
  </div>
</div>

＆＃13;

如何将图像拖到另一个图像的顶部？

2 个答案: