html实现拖拽效果 

<!DOCTYPE HTML>
<html>

    <head>
        <title>拖放示例-文本</title>
        <meta charset="utf-8">
    </head>
    <style>
        .src {
            display: flex;
        }

        .dropabled {
            flex: 1;
        }

        .txt {
            color: green;
        }

        .img {
            width: 100px;
            height: 100px;
            border: 1px solid gray;
        }

        .target {
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            border: 1px solid gray;
            color: red;
        }
    </style>

    <body>
        <div class="src">
            <div class="dragabled">
                <div class="txt" id="txt">
                    所有的文字都可拖拽。
                    <p draggable="true">此段文字设置了属性draggable="true"</p>
                </div>
                <div class="url" id="url">
                    <a href="http://weiqinl.com" target="_blank">我是url:http://weiqinl.com</a>
                </div>
                <img class="img" id="tupian1" src="005.jpg" alt="图片1"/>
                <img class="img" id="tupian2" src="005.jpg" alt="图片2"/>
            </div>
            <div id='target' class="dropabled target">Drop Here</div>
        </div>
        <script>
            var dragSrc = document.getElementById('txt')
            var target = document.getElementById('target')

            dragSrc.ondragstart = handle_start
            dragSrc.ondrag = handle_drag
            dragSrc.ondragend = handle_end

            function handle_start(e) {
                console.log('dragstart-在元素开始被拖动时候触发')
            }

            function handle_drag() {
                console.log('drag-在元素被拖动时候反复触发')
            }

            function handle_end() {
                console.log('dragend-在拖动操作完成时触发')
            }


            target.ondragenter = handle_enter
            target.ondragover = handle_over
            target.ondragleave = handle_leave

            target.ondrop = handle_drop

            function handle_enter(e) {
                console.log('handle_enter-当元素进入目的地时触发')
                // 阻止浏览器默认行为
                e.preventDefault()
            }

            function handle_over(e) {
                console.log('handle_over-当元素在目的地时触发')
                // 阻止浏览器默认行为
                e.preventDefault()
            }

            function handle_leave(e) {
                console.log('handle_leave-当元素离开目的地时触发')
                // 阻止浏览器默认行为
                // e.preventDefault()
            }

            function handle_drop(e) {
                console.log('handle_drop-当元素在目的地放下时触发')
                var t = Date.now()
                target.innerHTML = ''
                target.append(t + '-拖放触发的事件。')
                e.preventDefault()
            }
        </script>
    </body>

</html>

 

https://juejin.im/post/5a169d08518825592c07c666

 

posted @ 2019-03-06 15:48  jec1999  阅读(499)  评论(0)    收藏  举报