MyException - 我的异常网
当前位置:我的异常网» JavaScript » 跨iframe拖动,该怎么解决

跨iframe拖动,该怎么解决

www.MyException.Cn  网友分享于:2013-12-12  浏览:12次
跨iframe拖动
需求:index页面中有个垃圾箱图标,index中同时有个iframe(该iframe是显示数据页面),我想把iframe中数据拖到index页面中的垃圾箱的话,那么删除该数据,开始我使用jquery sortable在index中定义结果没反应,
$(window.frames['maincontent'].document).find("#yqtable").sortable({
items:'tr',//定义被拖动的对象
        connectWith: ".delete",//容器外联
        cancel: ".cacel",//标有该样式的将无法被拖动
        cursor: 'move',    //鼠标样式
        opacity: 0.8,    //拖拽时透明
        revert:true,
        out:sortableUpdate//拖拽状态
    }).disableSelection();
求例子,求大神

------解决方案--------------------
好霸气的需求。

如果非要跨iframe拖动,那么非HTML5中的drag and drop API(以下简称dnd API)莫属了。dnd API不仅可以跨iframe,甚至是跨window,跨Client App的,因为这个拖拽API是system level的。这个拖拽和普通的mousedown + mousemove + mouseup模拟的不同,dnd API可以处理好比你从一个文件夹拖拽一个文件到另一个文件夹的这种事件。缺点是HTML5的浏览器才支持。

在iframe内部的item上绑定dragstart事件,在事件的data域中放入需要的数据比如item的序号。在index页面的垃圾箱上监听dragenter和dragover事件,在ondrop事件中取出数据,通知iframe页面进行删除处理。

这里是demo
可以看到,这里拖拽产生的跟随图像,可以超出浏览器范围,因此跨iframe交互是完全可行的,这是普通的mouse事件模拟不能完成的。

文章评论

10个调试和排错的小建议
10个调试和排错的小建议
漫画:程序员的工作
漫画:程序员的工作
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员和编码员之间的区别
程序员和编码员之间的区别
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员都该阅读的书
程序员都该阅读的书
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
如何成为一名黑客
如何成为一名黑客
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
那些争议最大的编程观点
那些争议最大的编程观点
一个程序员的时间管理
一个程序员的时间管理
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
程序员必看的十大电影
程序员必看的十大电影
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
Java程序员必看电影
Java程序员必看电影
程序员应该关注的一些事儿
程序员应该关注的一些事儿
编程语言是女人
编程语言是女人
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员的鄙视链
程序员的鄙视链
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
老程序员的下场
老程序员的下场
总结2014中国互联网十大段子
总结2014中国互联网十大段子
鲜为人知的编程真相
鲜为人知的编程真相
为什么程序员都是夜猫子
为什么程序员都是夜猫子
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
我的丈夫是个程序员
我的丈夫是个程序员
旅行,写作,编程
旅行,写作,编程
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
我是如何打败拖延症的
我是如何打败拖延症的
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
 程序员的样子
程序员的样子
代码女神横空出世
代码女神横空出世
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有