我有一个 html 文件，它将一张图片放在另一张图片之上。但是我希望叠加图像可以被用户拖动，限制在底层图像的边界内。有好心人给点建议吗？
<html>
<head>
<style type="text/css">
#about {
z-index:1;
position:absolute;
top:10%;
left:3%;
opacity: 0.6;
}
#main-content-image {
height:100%;
position:relative;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(function () {
var img = new Image();
$(img).load(function () {
$('#main-content-image').append(this);
}).attr('src', 'foo.jpg');
});
});
</script>
</head>
<body>
<div id="main-content-image">
<img id="about" src='bar.jpg'>
</div>
</body>
</html>
最佳答案
您只需要使用 jQuery UI 中的 draggable 函数即可。
$(document).ready(function () {
$(function () {
$("#draggable").draggable();
});
});
这是一个工作示例:
关于javascript - 如何使图像在另一个图像之上拖动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31165736/