jqueryui可拖动带有处理程序的移动图像
jqueryui draggable move image with handler
如何使用处理程序获得可拖动的图像?我已经读到处理程序应该在draggable中,但我不能在图像中有其他元素。
我在这里有一个更好的演示小提琴:
http://jsfiddle.net/index/bfpWv/10/
问题是,我应该如何在#viewport
内部拖动并仍然移动#image
?
编辑
我认为这个问题有点模糊:
因为现在(在小提琴上)当你第一次点击#image
并拖动时,它会拖动#image
。但当你首先点击#viewport
时,它不会。这就是我想要的,当你首先点击#viewport
并拖动时,它仍然会拖动#image
。
jquery draggable似乎需要将处理程序放入draggable中。只需几行代码,您就可以编写自己的可拖动程序。在这里查看我的演示
HTML:
<div id="container">
<img id="image" src="http://thechive.files.wordpress.com/2011/03/hot-sexy-redheads-12.jpg" />
<div id="viewport"></div>
</div>
JS:
$(document).ready(function(){
var isDragging,
top = 0, left = 0,
curX, curY;
$("#image").mousedown(function (e) {
e.preventDefault();
});
$("#container").mousedown(function (e) {
isDragging = true;
curX = e.pageX;
curY = e.pageY;
left = Number($("#image").css("margin-left").
toString().replace("px", ""));
top = Number($("#image").css("margin-top").
toString().replace("px", ""));
});
$(document).mouseup(function () {
if (isDragging){
// reset
isDragging = false;
top = 0;
left = 0;
}
});
$("#container").mousemove(function(e){
if (!isDragging) {
return;
}
left += e.pageX - curX;
top += e.pageY - curY;
// set the position
$("#image").css("margin-left", left + "px").
css("margin-top", top + "px");
curX = e.pageX;
curY = e.pageY;
});
});
更新了你的小提琴。请阅读此处的文档:http://api.jqueryui.com/draggable/#option-安全壳
您必须在.draggable
方法中使用containment选项,并且还需要将图像放入#viewport
中,以便使其最初位于#viewport
中。你也可以把它放在#viewport
外面,一旦你把它拖到#viewport
里面,它就不会让你再把它拖出去了。
考虑您的描述我应该如何在#viewport
内部拖动并仍然移动#image
--使用简单的z-index-css样式完成。希望这次能有所帮助。Fiddle
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 如何减少在移动网络应用程序上播放声音的延迟
- Meteor移动应用程序-嵌入式数据库
- 移动小程序而不重新加载
- Angular UI&引导程序:点击链接时折叠移动导航栏
- 如何在telerik剑道移动应用程序中按下刷新数据源的按钮
- 移动登录应用程序
- jquery移动应用程序无法使用jquryMobile框架JS和css文件的相对路径
- 离子框架移动应用程序性能问题
- 在移动设备上按路径或名称获取二进制图像(Ionic / Ng cordova 应用程序)
- 移动照片库应用程序
- 尝试在移动优先应用程序中从 SQL 数据库获取数据时出错
- 移动优先 - 加密缓存成功和失败处理程序
- 我想在混合移动应用程序中使用Sqlite插件(Cordova)创建一个示例项目
- 地理位置不适用于苹果移动网络应用程序功能
- 将Facebook应用程序移动到新服务器,现在它坏了
- Node.JS+Socket.io,将套接字事件处理程序移动到外部模块
- 正在将AngularJS应用程序移动到pushState
- 将内联事件处理程序移动到chrome扩展的javascript工作表
- 将事件处理程序移动到单独的文档