5-2 复制才能拖拽的理解
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用拖拽更改支付宝的默认付款方式</title>
<style type="text/css">
body {
background: #eee;
}
h3 {
text-align: center;
}
ul {
list-style: none;
position: relative;
margin-left: -180px;
left: 50%;
}
li {
display: block;
height: 30px;
width: 200px;
border: 1px dashed #bbb;
line-height: 30px;
}
.hidden {
display: none;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h3>使用拖拽更改支付宝的默认付款方式</h3>
<ul id="card">
<li draggrable="true">招商信用卡</li>
<li draggrable="true">交通信用卡</li>
<li draggrable="true">中信储蓄卡</li>
<li draggrable="true">建行储蓄卡</li>
<li draggrable="true">蚂蚁花呗</li>
<li draggrable="true">余额宝</li>
<li draggrable="true">余额</li>
</ul>
<img src="http://img1.sycdn.imooc.com/climg//59705a7b0001736902000080.png" class="hidden">
<script>
(function($) {
var dragSrc;
$('li').each(function(index, ele) {
$(ele).on('dragstart', function(e) {
dragSrc = this;
e.originalEvent.dataTransfer.setData('text/html', this.innerHTML);
e.originalEvent.dataTransfer.setDragImage($('img').clone().removeClass('hidden')[0], 0, 0);
}).on('dragover', function(e) {
e.preventDefault();
}).on('drop', function(e) {
if (dragSrc != this) {
dragSrc.innerHTML = this.innerHTML;
this.innerHTML = e.originalEvent.dataTransfer.getData('text/html');
}
});
})
})(jQuery);
</script>
</body>
</html>代码效果：
显然，这个最终的实现效果和给出的实例有很大的差别，需要选中要拖拽的文字，才能实现拖拽；
我觉得出现这个问题的原因是，我们实现这个案例借鉴的代码原型是拖拽拼图，在拼图案例中，因为li中的内容是img标签，所以在交换的时候，直接使用innerHTML交换即可实现图片的拖拽的交换；
但是这个案例中li的内容是文字，所以innerHTML获取的必然是文字，所以拖拽的时候才会出现选中才能拖拽的状况；
以上是我的推断，而且我还没有想到该怎么写来实现演示案例；
所以希望写出来的同学可以指点一下；
26
收起
正在回答 回答被采纳积分+1
3回答
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星