對於可點擊元素的拖拽實現

<style>
    #running-mouse {
        position: fixed;
        left: 30px;
        bottom: 15%;
        z-index: 1000;
        cursor: pointer;
    }
</style>
<div id="running-mouse">
    <a href="javascript:;">
        <img src="{% static 'img/web/cn/home/running-mouse.png' %}" alt="">
    </a>
    <span class="pull-right" aria-hidden="true"
          onclick="document.getElementById('running-mouse').style.display='none';">x</span>
</div>
<script>
    var running_mouse = document.getElementById('running-mouse');
    function dragElement(element, url) {
        element.addEventListener('mousedown', function (event) {
            var originMouseX, originMouseY, moveX, moveY;

            originMouseX = event.clientX;
            originMouseY = event.clientY;
            document.addEventListener('mousemove', mouseMove, false);
            document.addEventListener('mouseup', mouseUp, false);

            function mouseMove(event) {
                moveX = event.clientX - originMouseX;
                moveY = event.clientY - originMouseY;
                originMouseX = event.clientX;
                originMouseY = event.clientY;
                element.style.left = +moveX + element.offsetLeft + 'px';
                element.style.top = +moveY + element.offsetTop + 'px';
                event.preventDefault();
            }

            function mouseUp(event) {
                document.removeEventListener('mousemove', mouseMove, false);
                document.removeEventListener('mouseup', mouseUp, false);
                if (url && !moveX && !moveY) {
                    var a = document.createElement('a');
                    a.href = url;
                    a.style.display = 'none';
                    a.click();
                }
            }
        }, false)
    }
    dragElement(running_mouse, '/cn/zh-cn/public-search.html');
</script>