jquery UI draggable 带复制拖拽

2023-06-15 21:57•javascript•阅读 1362

// 做学习参考的话，重点看3就可以了，前面的1跟2 都有些问题，这是很早之前写的了，由于时间原因顾不上细细修改了，

// 具体就是修改 $('.ui-draggable-dragging').html（）结构，使得拖动过程中的样式美观，

//('.this_a') 是要去拖目标对象的身份识别ID，('.this_b') 是对应得具体内容，后面在去重判断时会用到。

// 详细的可以去参考官网或菜鸟教程 http://www.runoob.com/jqueryui/example-draggable.html 本文这个有时间的话，我会在整理整理。谢谢！！！

1.带去重复带复制拖拽

<!DOCTYPE html>
<html>
<head >
<script type="text/javascript" language="javascript" src="js/trirand/jquery-1.11.1.min.js"></script>
<script type="text/ecmascript" src="js/trirand/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/trirand/jquery-ui.css" />

<style>

.goal_item{
    float: left;
    margin-right: -1px;
    border:solid 1px #D9E1EB;
    height: 210px;
}
.goal_item dt{
    border-bottom:solid 1px #D9E1EB;
    font: normal 14px/34px "Microsoft YaHei","微软雅黑";
    text-align: center;
    padding: 0 14px;
    background-color: #E7F1FF;
}


.goal_item dd{
    height: 176px;
    width: 124px;
    text-align: center;
    overflow-x: hidden;
    overflow-y:auto;
}
.goal_item ul{
    height: 100%;
    float: left;
    width: 100%;
    padding-top: 15px;

}

.goal_item li{
    padding-bottom: 15px;
}
.ERP_moving  a{
    display: inline-block;
    text-align: center;
    width: 96px;
    height: 26px;
    line-height: 26px;
    color: #FFFFFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #B8CBED;
    margin: 0 14px 0 8px;
}
.ERP_moving  a:hover{
    background-color: #4895FF;
}

</style>
</head>
<body>
<dl class="goal_item">
    <dt>采购计划单</dt>
    <dd>
        <ul class="goal_item_ul">
            <li class="ERP_moving"><a href="javascript:void(0)">测试保留</a></li>
        </ul>
    </dd>
</dl>

<!-- 此处用的jqGrid 具体的不写了-->




<table ></table>
<div ></div>
<script>

　　　　$(function() {

                    $("#jqGrid").find('tr').draggable( {
                                addClasses: false,
                                // axis: "x" ,  //约束在水平轴 (x) 或垂直轴 (y) 上拖拽。可能的值："x", "y"。
                                // cancel: ".title",  //防止从指定的元素上开始拖拽。
                                // cursorAt: { left: 5 },  //设置拖拽助手（helper）相对于鼠标光标的偏移。坐标可通过一个或两个键的组, { top, left, right, bottom }。
                                //  delay: 300, 标按下后直到拖拽开始为止的时间,默认0
                                // disabled: true, //如果设置为 true，则禁用该 draggable。
                                //  distance: 10, //鼠标按下后拖拽开始前必须移动的距离，以像素计。
                                //  grid: [ 50, 20 ] }, //对齐拖拽助手（helper）到网格，每个 x 和 y 像素。数组形式必须是 [ x, y ]。
                                // handle: "h2", // 如果指定了该选项，则限制开始拖拽，除非鼠标在指定的元素上按下。只有可拖拽（draggable）元素的后代元素才允许被拖拽。
                                //opacity: 0.35, //当被拖拽时助手（helper）的不透明度。
                                //refreshPositions: true, //如果设置为 true，在每次鼠标移动（mousemove）时都会计算所有可放置的位置。
                                //revert: true, //当拖拽停止时，元素是否还原到它的开始位置。
                                //revertDuration: 200 , //还原（revert）动画的持续时间，以毫秒计。如果 revert 选项是 false 则忽略。
                                //scope: "tasks" , //用于组合配套 draggable 和 droppable 项，除了 droppable 的 accept 选项之外。一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。
                                //scroll: false , //如果设置为 true，当拖拽时容器会自动滚动。会出现滚动条  默认true
                                // scrollSensitivity: 100, //窗口滚动距离
                                // scrollSpeed: 100 ,  //窗口滚动速度
                                //  snap: true，//元素是否对齐到其他元素。
                                // snapMode: "inner" ,//决定 draggable 将对齐到对齐元素的哪个边缘。如果 snap 选项是 false 则忽略。可能的值："inner"、"outer"、"both"。
                                // snapTolerance: 30,  //从要发生对齐的对齐元素边缘起的距离，以像素计。如果 snap 选项是 false 则忽略。
                                // stack: ".products" , //控制匹配选择器（selector）的元素集合的 z-index，总是在当前拖拽项的前面，在类似窗口管理器这样的事物中非常有用。
                                // zIndex: 100, //当被拖拽时，助手（helper）的 Z-index。

                                cursorAt: {
                                    top:8, left:48
                                },
                                iframeFix: true ,//防止拖拽期间 iframes 捕捉鼠标移动（mousemove ）事件
                                connectToSortable: ".goal_item_ul",  //拖放到指定元素
                                containment: "window",  //约束在指定元素或区域的边界内拖拽。可能的值："parent"、"document"、"window"。
                                cursor: "move",  //拖拽操作期间的 CSS 光标。
                                helper:"clone",   //允许一个 helper 元素用于拖拽显示。 original
                                appendTo: "body",
                                create: function( event, ui ) {

                                },  //当 draggable 被创建时触发。
                                drag: function( event, ui ) {
//                                    var b = $(this).find('.this_b').text();
//                                    $('.ui-draggable-dragging').html('<li class="ERP_moving"><a href="javascript:void(0);">'+b+'</a></li>')
                                }, //在拖拽期间当鼠标移动时触发。
                                start: function( event, ui ) {
                                    var b = $(this).find('.this_b').text();
                                    $('.ui-draggable-dragging').html('<li class="ERP_moving "><a href="javascript:void(0);">'+b+'</a></li>')
                                },//当拖拽开始时触发。
                                stop: function( event, ui ) {
                                    //用户ID
                                    var a = $(this).find('.this_a').text();
                                    //用户名称
                                    var b = $(this).find('.this_b').text();
                                    //已有用户

                                    $('.goal_item_ul').each(function(ii,dd){
                                        var item = $(dd).find('tr').siblings('li')
                                        item.each(function(i,d){
                                            if($(d).text() == b && $(d).attr('data_id') == a){
                                                $(d).remove()
                                            }
                                        })
                                    })

                                    $('.goal_item_ul').find("tr[role='row']").replaceWith('<li class="ERP_moving" data_>);
                                    $('.goal_item_ul').find('.ui-sortable-placeholder').html('<li class="ERP_moving" data_>);

                                        $('.ui-sortable-helper').remove()

                                    setTimeout(function(){
                                        $('.goal_item_ul').find('.ui-sortable-placeholder').remove()
                                        console.log('已删除')
                                    },1200)

                                },//当拖拽停止时触发。
                                revert:"invalid"
                            }

                    );

                    $(".goal_item_ul").sortable( {
                                revert: true
                            })
                    $("ul, li").disableSelection();

                }
        );
</script>
</body>
</html>

2.事件绑定

            $("#jqGrid").on('mouseover','tr',function(){
                $(this)
                .draggable( {
                            addClasses: false,
                            cursorAt: {
                                top:8, left:48
                            },
                            iframeFix: true ,//防止拖拽期间 iframes 捕捉鼠标移动（mousemove ）事件
                            connectToSortable: ".goal_item_ul",  //拖放到指定元素
                            containment: "window",  //约束在指定元素或区域的边界内拖拽。可能的值："parent"、"document"、"window"。
                            cursor: "move",  //拖拽操作期间的 CSS 光标。
                            helper:"clone",   //允许一个 helper 元素用于拖拽显示。 original
                            appendTo: "body",
                            create: function( event, ui ) {

                            },  //当 draggable 被创建时触发。
                            drag: function( event, ui ) {
//                                    var b = $(this).find('.this_b').text();
//                                    $('.ui-draggable-dragging').html('<li class="ERP_moving"><a href="javascript:void(0);">'+b+'</a></li>')
                            }, //在拖拽期间当鼠标移动时触发。
                            start: function( event, ui ) {
                                var b = $(this).find('.this_b').text();
                                $('.ui-draggable-dragging').html('<li class="ERP_moving "><a href="javascript:void(0);">'+b+'</a></li>')
                            },//当拖拽开始时触发。
                            stop: function( event, ui ) {
                                //用户ID
                                var a = $(this).find('.this_a').text();
                                //用户名称
                                var b = $(this).find('.this_b').text();
                                //已有用户

                                $('.goal_item_ul').each(function(ii,dd){
                                    var item = $(dd).find('tr').siblings('li')
                                    item.each(function(i,d){
                                        if($(d).text() == b && $(d).attr('data_id') == a){
                                            $(d).remove()
                                        }
                                    })
                                })

                                $('.goal_item_ul').find("tr[role='row']").replaceWith('<li class="ERP_moving" data_+a+'" ><a href="javascript:void(0);">'+b+'</a></li>');
//                                    $('.goal_item_ul').find('tr').html('<li class="ERP_moving" data_+a+'" ><a href="javascript:void(0);">'+b+'</a></li>');
                                $('.goal_item_ul').find('.ui-sortable-placeholder').html('<li class="ERP_moving" data_+a+'"><a href="javascript:void(0);">'+b+'</a></li>');

                                $('.ui-sortable-helper').remove()

                                setTimeout(function(){
                                    $('.goal_item_ul').find('.ui-sortable-placeholder').remove()
                                    console.log('已删除')
                                },1200)

                            },//当拖拽停止时触发。
                            revert:"invalid"
                        }

                );
            })

　　       $(".goal_item_ul").sortable( {

                                revert: true
                            })
          $("ul, li").disableSelection();

3.排序、放置、退拽等结合版

            $("#jqGrid").on('mouseover','tr',function(){
                $(this)
                        .draggable( {
                            addClasses: false,
                            cursorAt: {
                                top:8, left:48
                            },
                            delay: 0, //标按下后直到拖拽开始为止的时间,默认0
                            iframeFix: true ,//防止拖拽期间 iframes 捕捉鼠标移动（mousemove ）事件
                            containment: "window",  //约束在指定元素或区域的边界内拖拽。可能的值："parent"、"document"、"window"。
                            cursor: "move",  //拖拽操作期间的 CSS 光标。
                            helper:"clone",   //允许一个 helper 元素用于拖拽显示。 original
                            appendTo: "body",
                            create: function( event, ui ) {

                            },  //当 draggable 被创建时触发。
                            drag: function( event, ui ) {

                            }, //在拖拽期间当鼠标移动时触发。
                            start: function( event, ui ) {
                                var b = $(this).find('.this_b').text();
                                $('.ui-draggable-dragging').html('<li class="ERP_moving "><a href="javascript:void(0);">'+b+'</a></li>')
                                $(this).draggable( "disable" );   //禁用 draggable
                            },//当拖拽开始时触发。
                            stop: function( event, ui ) {
                                $(this).draggable( "enable" )  //启用 draggable
                            }//当拖拽停止时触发。
                        }
                );
            })

            $(".goal_item_ul").droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                accept: ":not(.ui-sortable-helper)",
                drop: function( event, ui ) {
                    $( this ).find( ".placeholder" ).remove();
                    var a = ui.draggable.find('.this_a').text()
                    var b = ui.draggable.find('.this_b').text()
                    var that =$(this)
                    var item = $(this).find('li')
                    var i_length = item.length
                    if(item.length>0){
                        item.each(function(i,d){

                            if($(d).find('a').text() == b && $(d).find('a').attr('data_id') == a){
                                //有历史数据，去重
                                return false;
                            }
                            else{
                                if(i==i_length-1){
                                    //遍历所有，保证没重复的，创建新数据
                                    $( '<li class="ERP_moving"><a href="javascript:void(0);" data_>'+b+'</a></li>').appendTo(that);
                                    return false;
                                }
                            }
                        })
                    }
                    else{
                        //最初始无数据，创建新数据
                        $( '<li class="ERP_moving "><a href="javascript:void(0);" data_>'+b+'</a></li>').appendTo(that);
                    }
                }
            }).sortable({
                items: "li:not(.placeholder)",
                sort: function() {
                    // 获取由 droppable 与 sortable 交互而加入的条目
                    // 使用 connectWithSortable 可以解决这个问题，但不允许您自定义 active/hoverClass 选项
                    $( this ).removeClass( "ui-state-default" );
                }
            });

            $("ul, li").disableSelection();

上一篇 »java实现鼠标拖拽动作监听
下一篇 »【转】 HTML5 元素拖拽移动删除效果

jquery UI draggable 带复制拖拽

相关推荐

JavaScript鼠标拖拽特效及相关问题总结

html5实现拖拽上传

[转]用Javascript实现鼠标拖拽网页表单

JS+CSS制作的DIV层最小化和随意拖拽排序功能

Javascript实现重力弹跳拖拽运动效果

怎么用javascript进行拖拽？

JavaScript实现鼠标拖拽围绕圆心转动

Vue+ElementUi项目实现表格-单行拖拽