draggabilly.js 实现网页元素的拖放操作插件-BFW插件库

draggabilly.js 实现网页元素的拖放操作插件

draggabilly.js 实现网页元素的拖放操作插件，支持IE8 +和多点触控。

第一步引入bfwone

第二步执行插件代码

elem就是一个对象，可以自定义拖动的事件

var draggie = new Draggabilly( elem );
function onDragMove( instance, event, pointer ) {
  console.log( 'dragMove on ' + event.type +
    pointer.pageX + ', ' + pointer.pageY +
    ' position at ' + instance.position.x + ', ' + instance.position.y );
}
// bind event listener
draggie.on( 'dragMove', onDragMove );
// un-bind event listener
draggie.off( 'dragMove', onDragMove );
// return true to trigger an event listener just once
draggie.on( 'dragMove', function() {
  console.log('Draggabilly did move, just once');
  return true;
});

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["draggabilly"], function() {
                var draggie = new Draggabilly('.draggable');
            });
        });
    </script>
    <style>
        .draggable{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <h1>Draggabilly - with vanilla JS</h1>
    <div class="draggable"></div>

</body>
</html>

官方地址https://github.com/desandro/draggabilly