Javascript 使用hammer.js制作克隆以交换为html元素

我试图在两个div之间进行交换，我的意思是，通过保存其他事件和所有内容来改变一个div

两者都有锤击事件来检测刷击。当我在项目中交换元素时，它们丢失了hammer事件，但保留了其他事件，如单击

为了说明我所做的行为：

$（文档）.ready（函数（）{
$（“#obj2”）。每个（函数（）{
var$this=$（this）；
var h=新锤子（本）；
h、 get（“swipe”）.set（{方向：Hammer.direction\u ALL，阈值：1，速度：0.1}）；
h、 打开（“滑动”，功能（ev）{
$this.text（ev.angle.toFixed（2））；
});
}); 
$（“#obj1”）。单击（函数（）{
警惕（“这起作用”）；
});
$（“#makeClone”）。单击（函数（）{
$（“#obj2”）.text（“3.再次刷卡：（”）；
var aux=$（“#obj2”）.clone（true）；
$（“#container2”）.html（$（“#container1”）.clone（true））；
$（“#container1”）.html（aux）；
});
})；

div.obj，#makeClone{
显示：内联块；
框大小：边框框；
宽度：300px；
高度：150像素；
文本对齐：居中；
边界半径：10px；
背景#f44336；
字体：18px/150px“拉托”；
颜色：白色；
边缘底部：5px；
光标：指针；
}
#obj2{
背景#4caf50；
}
#makeClone{
背景:#666；
高度：50px；
字体：12px/50px“hack”；
}

点击
1.打我！



2.使用克隆进行更改

不要

克隆

您的对象。使用

.append

而不是

.html

$（文档）.ready（函数（）{
$（“#obj2”）。每个（函数（）{
var$this=$（this）；
var h=新锤子（本）；
h、 获取（“刷卡”）.set({
方向：锤子方向，
阈值：1，
速度：0.1
});
h、 打开（“滑动”，功能（ev）{
$this.text（ev.angle.toFixed（2））；
});
});
$（“#obj1”）。单击（函数（）{
警惕（“这起作用”）；
});
$（“#makeClone”）。单击（函数（）{
$（“#obj2”）.text（“3.再次刷卡：（”）；
风险值d1=$（“#集装箱1>div”）；
变量d2=$（“#容器2>div”）；
$（“#集装箱2”）。追加（d1）；
$（“#集装箱1”）。追加（d2）；
});
})；

div.obj，
#makeClone{
显示：内联块；
框大小：边框框；
宽度：300px；
高度：150像素；
文本对齐：居中；
边界半径：10px；
背景#f44336；
字体：18px/150px“拉托”；
颜色：白色；
边缘底部：5px；
光标：指针；
}
#obj2{
背景#4caf50；
}
#makeClone{
背景:#666；
高度：50px；
字体：12px/50px“hack”；
}

点击
1.打我！



2.使用克隆进行更改

不要

克隆

您的对象。使用

.append

而不是

.html

$（文档）.ready（函数（）{
$（“#obj2”）。每个（函数（）{
var$this=$（this）；
var h=新锤子（本）；
h、 获取（“刷卡”）.set({
方向：锤子方向，
阈值：1，
速度：0.1
});
h、 打开（“滑动”，功能（ev）{
$this.text（ev.angle.toFixed（2））；
});
});
$（“#obj1”）。单击（函数（）{
警惕（“这起作用”）；
});
$（“#makeClone”）。单击（函数（）{
$（“#obj2”）.text（“3.再次刷卡：（”）；
风险值d1=$（“#集装箱1>div”）；
变量d2=$（“#容器2>div”）；
$（“#集装箱2”）。追加（d1）；
$（“#集装箱1”）。追加（d2）；
});
})；

div.obj，
#makeClone{
显示：内联块；
框大小：边框框；
宽度：300px；
高度：150像素；
文本对齐：居中；
边界半径：10px；
背景#f44336；
字体：18px/150px“拉托”；
颜色：白色；
边缘底部：5px；
光标：指针；
}
#obj2{
背景#4caf50；
}
#makeClone{
背景:#666；
高度：50px；
字体：12px/50px“hack”；
}

点击
1.打我！



2.使用克隆进行更改

wow，很有效！…谢谢@Karan！！但我有点困惑…“append”真的插入了一个元素，而不是替换内容，所以…怎么可能这样工作呢？我使用html就是为了这个原因。

var d1=$（“#container1>div”）

这里

d1

包含

容器1

中的

div

元素，对于

d2

也是如此。然后当我们使用

$（“#容器2”）。append（d1）

它会将

d1

及其所有事件移动（append）到

容器2

。哇，它工作了！…谢谢@Karan！！但我有点困惑。。。“append”实际上是插入一个元素，而不是替换内容，所以……这怎么可能呢？我使用html就是出于这个原因。

vard1=$（“#container1>div”）；

这里

d1

保存

#container1

中的

div

元素，

d2

。然后当我们使用

$（“#container2”）。append（d1）

它将移动（附加）

d1

到

#container2

及其所有事件。