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获取的必然是文字，所以拖拽的时候才会出现选中才能拖拽的状况；

以上是我的推断，而且我还没有想到该怎么写来实现演示案例；

所以希望写出来的同学可以指点一下；

BruinK 2018-06-14

源自：HTML5拖拽上传 5-2 编程练习

收起

3回答

慕先生2197846 2018-07-05 18:26:20

学习了新东西

收起回答

小于飞飞 2018-06-29 14:09:31

注意"修改了innerHTML，然后将li上的draggrable="true"去掉，在js中加上.attr('draggable',true)之后，代码成功运行了"，是因为拼写错误，应该是 draggable='true'.

动手实践，希望解答你的疑惑，祝学习愉快。

收起回答

樱桃小胖子 2018-06-14 11:58:33

1、首先建议去掉li中的draggrable="true"

2、js代码建议调整如下

将innerHTML修改成innerText

希望可以帮到你~

收起回答

提问者 BruinK #1

这个代码在我这不能实现拖拽功能。您那边可以吗？

2018-06-14 17:00:37
樱桃小胖子回复提问者 BruinK #2

我这里是可以的哦，除了将innerHTML修改成innerText，还有其他的一些修改，建议详细的比较一下代码。

2018-06-14 17:39:05
墨墨砂回复樱桃小胖子 #3

我这里修改了innerHTML，然后将li上的draggrable="true"去掉，在js中加上.attr('draggable',true)之后，代码成功运行了。但是，为什么呢，为什么li上的draggrable="true"无效呢？

2018-06-27 20:42:10