jquery 拖拽复制

最新推荐文章于 2022-11-01 17:18:30 发布
最新推荐文章于 2022-11-01 17:18:30 发布
阅读量354 收藏 3
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36958916/article/details/114981926
版权

在这里插入图片描述

<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>
anne都
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery拖拽图片
12-02
经过代码的调整，实现了不同行之间的拖拽和排序。以及获取src地址
jquery实现拖拽、复制、放置
Y_东东的博客
05-12 2638
直接代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;拖拽复制&lt;/title&gt; &lt;style&gt; .divCopy { width:
Jquery网页图片动态复制拖拽，并用ajax实现与后台struts2的交互
05-10
可以直接下下来使用，用jquery实现了图片复制，拖拽，并且ajax实现与后台struts2的交互，用json相互传值。简单明了
jquery ui拖拽 克隆
06-27
jquery ui拖拽 克隆 可进行退拽功能的复制
jquery拖动复制效果
06-01
拖动div复制到表格
【jQuery】拖曳插件——draggable
O(∩_∩)O
12-22 4754
拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下： $(selector). draggable({options}) options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖
jquery UI draggable 带复制拖拽
weixin_30341745的博客
09-30 858
// 做学习参考的话，重点看3就可以了， 前面的1跟2 都有些问题， 这是很早之前写的了，由于时间原因顾不上细细修改了， // 具体 就是修改 $('.ui-draggable-dragging').html（） 结构， 使得拖动过程中的样式美观， //('.this_a') 是要去拖目标对象的身份识别ID，('.this_b') 是对应得具体内容， 后面在去重判断时会用到。// 详细的 ...
jquery UI 跟随学习笔记——拖拽（Draggable）
weixin_30583563的博客
12-12 266
引言 这周暂时没有任务下达，所以老大给我的任务就是熟悉jquery相关插件，我就先选择了jquery UI 插件，以及jquery库学习。 我用了两天的时候熟悉Interactions模块中的Draggable功能，并跟随练习，写这篇博文就是想记录下自己的心得体会。 正文：Draggable(拖拽) 1、默认配置：就是简单的一行代码：$( "#目标元素...
一个非常好用的前端框架，拖拽复制就能用
12-27
一个非常好用的前端框架，拖拽复制就能用，包含各种报表、列表、菜单、登录、注册、搜索、图表、…………
jQuery实现复制到粘贴板功能
10-20
主要为大家详细介绍了jquery实现复制到粘贴板功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于jquery实现的鼠标拖拽元素复制并写入效果
10-28
基于jquery实现的鼠标拖拽元素复制并写入效果的实现代码，需要的朋友可以参考下。
jQuery实现节点的追加、替换、删除、复制功能示例
10-19
主要介绍了jQuery实现节点的追加、替换、删除、复制功能,结合具体实例形式分析了jQuery针对DOM节点的操作技巧,涉及append()、prepend()、replaceAll()、replaceWith()empty()、remove()、clone()、clone()等方法的...
前端 mediaRecorder 录制视频源代码实例，和本地播放器无法定位进度条问题分析和解决
qq_36958916的博客
09-11 5675
问题 mediaRecorder 本质上录制的是webm 当我们使用getUserMedia、MediaRecorder等API生成的webm视频时，会发现最终的webm是无法拖动进度条的 解决方案 一、计算视频长度，分配给blob 这种方法的核心就是，在start开始录制时，记录一个开始时间，然后在stop停止录制后，把当前时间与记录的开始时间相减，在把时间赋值给blob来解决这个问题。源代码 主要代码 MediaUtils.getUserMedia(true, true, function (err
vue3 分模块打包 可单个模块打包，或者所有资源一起打包部署
qq_36958916的博客
11-01 4528
vue3 分模块打包 可单个模块打包，或者所有资源一起打包部署
el-table动态添加行,列。自定义输入表头，input hover 显示文字
qq_36958916的博客
06-21 4201
1，动态添加行 2，动态添加列 3，右键表头删除列 4，右键表体删除行 5，表格hover提示当前单元格文字，自动换行 6，表头文字自定义 7，表头，添加按钮固定，表体自适应滚动效果图：
map 重构数组获取数组对象中某一字段组成新数组或者更改属性名字段返回新数组
qq_36958916的博客
07-06 3696
一，取数组对象的某一字段属性组成新数组 二：取数组对象的某些字段属性重命名并组成新数组
uniapp api请求接口 封装
qq_36958916的博客
05-27 3534
1，写一个公共的api.js let baseURL = 'http://443548ef.cpolar.cn/';//公共api地址。示范 export const myRequest = (options) => { return new Promise((resolve, reject) => { uni.request({ url: baseURL + options.url, //接口地址：前缀+方法中传入的地址 method: options.method || '
jquery一键复制内容到剪切板
最新发布
07-28
你可以使用以下代码来实现使用 jQuery 一键复制内容到剪切板的功能： ```javascript // 创建一个隐藏的文本输入框 function createHiddenInput(value) { var $input = $('<input>').attr('type', 'text').val(value).appendTo('body'); $input.select(); return $input; } // 复制内容到剪切板 function copyToClipboard(value) { var $input = createHiddenInput(value); document.execCommand('copy'); $input.remove(); } // 监听复制按钮的点击事件 $('#copyButton').on('click', function() { var content = $('#content').text(); // 获取要复制的内容 copyToClipboard(content); }); ``` 上述代码中，`#copyButton` 是复制按钮的选择器，`#content` 是要复制的内容的选择器。你可以根据实际情况修改这两个选择器。 当点击复制按钮时，会获取要复制的内容并调用 `copyToClipboard` 函数，该函数会创建一个隐藏的文本输入框并将内容设置为输入框的值，然后执行 `document.execCommand('copy')` 命令将输入框中的内容复制到剪切板中，最后移除这个隐藏的输入框。 请注意，由于浏览器安全策略的限制，上述代码可能无法在所有浏览器上正常工作。在某些浏览器中，必须在用户操作（例如点击按钮）的上下文中执行复制命令，否则会被浏览器拦截。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值