drag.js 让任意元素变成可拖动的插件-BFW插件库

drag.js 让任意元素变成可拖动的插件

 $(element).myDrag({
			parent:'parent', //定义拖动不能超出的外框,拖动范围
			randomPosition:true, //初始化随机位置
			direction:'all', //方向
			handler:false, //把手
			dragStart:function(x,y){}, //拖动开始 x,y为当前坐标
			dragEnd:function(x,y){}, //拖动停止 x,y为当前坐标
			dragMove:function(x,y){} //拖动进行中 x,y为当前坐标
});
/*
***说明
***1.代码34行，阻止除img元素外所有子元素冒泡事件，如有需要请自行修改
***2.一些浏览器无法阻止img默认浏览器事件（其实就是拖动img会新窗口打开），so，最好是把img做成背景，或者在img上再覆盖一个div层，再使用下面的handler拖动
***3.本插件有添加addClass功能，在拖动的时候，会给拖动元素添加'on'的样式，如有需要，可自行修改'on'的样式表，本例'on'的样式为z-index:9;为了保持拖动的时候，当前元素为最高层
*/

第一步引入bfwone

第二步执行插件

示例如下，可在线运行和编辑

<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(["drag"], function() {
                $('.drag-box-1 .drag').each(function(index) {
                    $(this).myDrag({
                        direction: 'x'
                    });
                });
                $('.drag-box-2 .drag').each(function(index) {
                    $(this).myDrag({
                        randomPosition: true,
                        direction: 'y',
                        handler: false
                    });
                });
                $('.drag-box-3 .drag').each(function(index) {
                    $(this).myDrag({
                        randomPosition: true,
                        direction: 'all',
                        handler: false
                    });
                });
                $('.drag-box-4 .drag').each(function(index) {
                    $(this).myDrag({
                        randomPosition: true,
                        direction: 'all',
                        handler: '.handler'
                    });
                });
                $('.drag-box-5 .drag').each(function(index) {
                    $(this).myDrag({
                        parent: '.test',
                        randomPosition: false,
                        direction: 'all'
                    });
                });

                $('.drag-box-6 .drag').each(function(index) {
                    $(this).myDrag({
                        dragStart: function(x, y) {
                            $('.lg span').html('').eq(0).html('开始拖动了! — 坐标 x：'+x+' y：'+y);
                        },
                        dragEnd: function(x, y) {
                            $('.lg span').html('').eq(1).html('停止拖动了! — 坐标 x：'+x+' y：'+y);
                        },
                        dragMove: function(x, y) {
                            $('.lg span').html('').eq(2).html('拖动中! — 坐标 x：'+x+' y：'+y);
                        }
                    });
                });

            });
        });
    </script>
    <style>
        img{display:block;width:100%;height:auto}.drag-box{width:50%;height:350px;background-color:#3bb3e0;margin:0 auto 50px;border:1px solid #2561b4}.drag{width:150px;height:150px}.handler{background:#333;color:#fff;text-align:center;font-size:12px;line-height:20px}.drag.drag-1{width:150px;height:150px;top:100px}.drag-box.drag-box-2{height:600px}.drag.drag-2{width:150px;height:150px;left:50%;margin-left:-75px}.drag.drag-4{width:150px;height:170px}.drag-box.drag-box-5{width:80%;margin:0 auto}.test{position:relative;width:50%;margin:0 auto;height:350px;padding:50px 0;background-color:#ddd;margin:0 auto 100px;border:1px solid #aaa}.test i{display:block;position:absolute;top:10px;left:10px}.log{width:50%;height:75px;line-height:25px;margin:0 auto 20px;font-size:16px;color:#333}.log span{color:#cb0000}.drag.on{z-index:9}
    </style>
</head>
<body>
    <h3>Demo1：(direction:'x')</h3>
    <div class='drag-box drag-box-1'>
        <div class='drag drag-1'>
            <img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg"><input type="text">
        </div>
        <div class='drag drag-1'>
            <img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
        </div>
    </div>
    <h3>Demo2：(direction:'y')</h3>
    <div class='drag-box drag-box-2'>
        <div class='drag drag-2'>
            <img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
        </div>
        <div class='drag drag-2'>
            <img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
        </div>
    </div>
    <h3>Demo3：(direction:'all')</h3>
    <div class='drag-box drag-box-3'>
        <div class='drag drag-3'>
            <img src="//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
        </div>
        <div class='drag drag-3'>
            <img src=//repo.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
        </div>
    </div>
</body>
</html>

drag.js 让任意元素变成可拖动的插件

网友评论0

gridly.js

jquery-resizable.js

drag.js

draggabilly.js

impetus.min.js

jquery.dad.min.js

subjx.js

interact.min.js

subj.js

moveable.min.js