使用js克隆图片,就是从原图拖动复制到指定的div里面,原图依然保持不动

随_声 2019-07-25 07:37:41
使用js克隆图片,就是从原图拖动复制到指定的div里面,原图依然保持不动,用jquery写了一个,但导致我另一个用js写出来的功能不能用,所以想请问一下用js是怎么写
$(document).ready(function(){		
$(function() {
$(".nav-imgs").draggable({
revert : 'invalid',//如果设置为 "invalid",还原仅在 draggable 未放置在 droppable 上时发生
opacity : 0.7,//不透明度
helper : 'clone',//如果设置为 "clone",元素将被克隆,且克隆将被拖拽
scope : 'drop'//一个“default”与droppable带有相同的scope值的draggable会被该droppable接受
});
$(".div-rows-col").droppable({//拖动复制到指定的div当中
scope : 'drop',
drop : function(event, ui) {
var ud = ui.draggable;
if (ud.draggable("option", "helper") == "clone") {
ud.clone().appendTo($(".div-rows-col")).css({
position : 'absolute',
left : ui.offset.left,
top : ui.offset.top
}).draggable({
scope : 'drop',
revert : 'invalid'
}).resizable();//调整大小resizable
}
},

out : function(event, ui) {
ui.draggable.remove();
}
});

});

$(function() {
$(".ui-widget-conten").resizable();
});
});
...全文
374 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
_( Senior 2022-05-13
  • 打赏
  • 举报
回复

您好,请问您解决问题了吗,我现在也很想知道js怎么实现

随_声 2019-07-26
  • 打赏
  • 举报
回复
引用 2 楼 scscms太阳光 的回复:
尝试下ud.clone()改成ud.clone(true)
还是不行,调试的时候还是显示写那些div,但如果改为clone(true),你拖动复制过来的图,他还是从原图那里复制
if (ud.draggable("option", "helper") == "clone") {
						ud.clone(true).appendTo($(".div-rows-col")).css({
							position : 'absolute',
							left : ui.offset.left,
							top : ui.offset.top
						}).draggable({
							scope : 'drop',
							revert : 'invalid'
						}).resizable();//调整大小resizable
					}
scscms太阳光 2019-07-25
  • 打赏
  • 举报
回复
尝试下ud.clone()改成ud.clone(true)
随_声 2019-07-25
  • 打赏
  • 举报
回复
因为用jquery的helper : 'clone'克隆的导致调试的时候看到其他的div,是从jquery.js里来的,然后就导致我另一个在这个元素上的功能实现不了
一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code 1 2 3 4 给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来的tr,并设置这个tr为fixed(ie6为absolute),例如: Code 1 2 3 4 5 6 第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。 ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 【克隆table】 克隆一个元素用cloneNode就可以了,它有一个bool参数,表示克隆是否包含子节点。 程序第一步就是克隆原table: this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突 要注意虽然ie的cloneNode参数是可选的(默认是false),但在ff是必须的,建议使用时都写上参数。 还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他问题,程序会把克隆table的id属性设空。 ps:table请用class来绑定样式,用id的话新table就获取不了样式了。 克隆之后再设置样式: this._style.width = this._oTable.offsetWidth + "px"; this._style.position = isIE6 ? "absolute" : "fixed"; this._style.zIndex = 100; 一般来说offsetWidth是width+padding+border的结果,但table比较特别,测试下面的代码: Code

87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧