app直播源代码,jquery 拖拽复制

app直播源代码,jquery 拖拽复制

 

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jqeruy UI 拖拽练习</title>
    <style>
        table {
            border-collapse: collapse;
        }
            table td {
                empty-cells: show;
            }
    </style>
</head>
<body>
    <h2>
        拖动复制例子</h3>
            <table border="2">
                <tr height="40">
                    <td id="dragg1" width="110" bgcolor="peru">复制1</td>
                    <td id="dragg2" width="110" bgcolor="lightgreen">复制2</td>
                    <td id="dragg3" width="110" bgcolor="salmon">复制3</td>
                </tr>
            </table>
        <table>
            <tr>
                <td>
                    <table border="2">
                        <tr height="40">
                            <td width="150">a1</td>
                            <td width="150">a2</td>
                            <td width="150">a3</td>
                            <td width="150">a4</td>
                        </tr>
                        <tr height="40">
                            <td width="150" id="innerBox11"></td>
                            <td width="150" id="innerBox12"></td>
                            <td width="150" id="innerBox13"></td>
                            <td width="150" id="innerBox14"></td>
                        </tr>
                        <tr height="40">
                            <td width="150" id="innerBox21"></td>
                            <td width="150" id="innerBox21"></td>
                            <td width="150" id="innerBox21"></td>
                            <td width="150" id="innerBox21"></td>
                        </tr>
                        <tr height="40">
                            <td width="150" id="innerBox31"></td>
                            <td width="150" id="innerBox31"></td>
                            <td width="150" id="innerBox31"></td>
                            <td width="150" id="innerBox31"></td>
                        </tr>
                        <tr height="40">
                            <td width="150" id="innerBox41"></td>
                            <td width="150" id="innerBox41"></td>
                            <td width="150" id="innerBox41"></td>
                            <td width="150" id="innerBox41"></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <!--导入jquery插件-->
        <script type="text/javascript" src="https://www.jq22.com/demo/jquery-tdfz20160803/jQuery1.11.3.min.js"></script>
        <!--导入jqueryUI插件-->
        <script type="text/javascript" src="https://www.jq22.com/demo/jquery-tdfz20160803/jquery-ui.js"></script>
        <script type="text/javascript" language="javascript">
   //在页面加载完之后加载jquery
   $().ready(function(e) {
       //拖拽复制体
       $('td[id^="dragg"]').draggable({
   helper:"clone",
   cursor: "move"
});
//释放后
   $('td[id^="innerBox"]').droppable({
drop:function(event,ui){
$(this).children().remove();
var source = ui.draggable.clone();
    $('<span style="color:red;" onclick = "javascript: $(this).parent().remove();" >   删除</span>', {
style:'display:none',
}).appendTo(source);
source.mouseenter(function () {
    $(this).find("span").show();
});
source.mouseleave(function () {
    $(this).find("span").hide();
});
$(this).append(source);
}
});
     });
        </script>
        <!--自写脚本-->
        
        </body>

以上就是app直播源代码,jquery 拖拽复制的全部代码,更多内容请关注之后的文章

 

posted @ 2022-10-20 16:01  云豹科技-苏凌霄  阅读(14)  评论(0)    收藏  举报