div自由拖拽

最新推荐文章于 2023-06-29 15:38:14 发布
最新推荐文章于 2023-06-29 15:38:14 发布
阅读量794 收藏
点赞数
文章标签： div 拖拽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Super_Gods/article/details/49666165
版权

div自由拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="base64.js"></script>
<style>
.s1{
position:fixed;
top:100px;
left:200px;
background:#00F;
width:200px;
height:50px;
border-radius:70%;
}
.s0{
width:1000px;
height:1000px;

}
.s2{
position:fixed;
top:100px;
left:300px;
background:#F00;
width:400px;
height:50px;
border-radius:70%;
}
.s3{
position:fixed;
top:100px;
left:400px;
background:#CF6;
width:100px;
height:200px;
border-radius:70%;
}
.s4{
position:fixed;
top:100px;
left:500px;
background:#F06;
width:200px;
height:150px;
border-radius:70%;
}
.s5{
position:fixed;
top:100px;
left:500px;
background:#000;
width:20px;
height:20px;
border-radius:70%;
}
.s6{
position:fixed;
top:100px;
left:500px;
background:#000;
width:20px;
height:20px;
border-radius:70%;
}
.s7{
position:fixed;
top:100px;
left:500px;
background:#C30;
width:20px;
height:150px;
border-radius:70%;
}
.s8{
position:fixed;
top:100px;
left:500px;
background:#C30;
width:20px;
height:150px;
border-radius:70%;
}
*,.body{
    height:2000px;;
}
</style>
<script>
$(document).ready(function(){ 
    var sslist=$("#s0 #ss");
    alert(sslist.length);
    sslist.mousedown(function(event) { 

                 var isMove = true;
                 var abs_x = event.pageX - $(this).offset().left;
                 var abs_y = event.pageY - $(this).offset().top;
                 var index=sslist.index($(this));
                 $(document).mousemove(function(event) {
                    if (isMove) {
                       var obj = $("#s0 #ss").eq(index);
                      obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
                    }
                 });

                 $(document).mouseup(function(event) {
                   isMove = false;     
                });
         }); 
});
var xx="aHR0cA==";
alert(Base64.decode(xx)); 
</script>
</head>

<body>
fasfdsafdsafdasfdsaf
<div id="s0">
<div id="ss" class="s1"></div>
<div id="ss" class="s2"></div>
<div id="ss" class="s3"></div>
<div id="ss" class="s4"></div>
<div id="ss" class="s5"></div>
<div id="ss" class="s6"></div>
<div id="ss" class="s7"></div>
<div id="ss" class="s8"></div>
<div>

</body>
</html>
Super_Gods
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery拖拽排序插件div自由拖动排序代码
11-10
在给定的标题“jquery拖拽排序插件div自由拖动排序代码”中，我们主要讨论的是如何利用jQuery实现一个功能，让用户能够自由地通过拖放操作来对页面上的div元素进行排序。这种功能在许多应用场景中都非常实用，比如...
div可视化拖动 随着鼠标拖动div，可以自由拖动
zhh_5的博客
12-19 1145
div可视化拖动
div拖拽功能实现
maise6666的博客
06-21 1513
div拖拽移动
使用layui第三方组件实现表格拖动排序
nhx900317的博客
02-23 2517
使用layui第三方组件实现表格拖动排序功能描述使用方法 功能描述 我们在开发前端页面时，使用layui框架十分方便，但是默认的表格功能比较单一，无法进行一些复杂的操作，比如拖动行列等，这里介绍一个layui的第三方框架网站，都是各个开发者提供的layui第三方组件，可以使layui更加丰富。包括列表拖拽，条形图等： layui 第三方组件平台； 使用方法 使用的组件除了列表拖拽，还有很多其他的功能，这里我们主要就使用其列表的行列拖拽的功能。 列表拖拽组件页面；在页面中已经说明了使用方法，在这我再结合具体项
LayUI学习
wei1111111112的博客
07-01 979
1.官网：https://www.layui.com/doc/ layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览...
可随意拖拽的div
qq_40102178的博客
11-26 4878
div拖拽 css代码: &amp;lt;style type=&quot;text/css&quot;&amp;gt; .drag { position:absolute; background: #48cccc; top:100px; left:200px; padding:0; ...
div自由拖动
03-12
实现div自由拖动的小例子，十分简单，大家参考
jQuery使用drag效果实现自由拖拽div
10-24
本文给大家分享一款jquery实现的完美拖拽(拖动div层效果)，如果你正在找这类效果不妨进入参考一下。
splitter.js 分割div 自由拖动
11-22
`splitter.js` 是一个JavaScript库，主要用于在网页中创建可拖动的分割线，以实现用户自由调整页面布局的功能。这个库使得开发者能够轻松地将页面分为上下、左右等多栏布局，并允许用户根据自己的需求动态改变这些...
jQuery创建div层自由拖动布局代码
06-10
本篇将深入讲解如何利用jQuery实现div层的自由拖动以及尺寸调整功能，这对于创建楼宇平面图布局等场景尤为实用。 首先，我们需要引入jQuery库。在`index.html`文件中，添加以下代码来引入jQuery： ```html <!...
JQ JS javascript layui UI组件 元素 div 拖动插件
04-18
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
Layui框架的拖动上传 以及 时间选择器的基本使用
最新发布
m0_65607651的博客
06-29 1001
Layui框架的拖动上传 以及 时间选择器的基本使用
如何让DIV可编辑、可拖动
热门推荐
jcx5083761的专栏
09-17 3万+
1、可编辑：  contentEditable="true">可编辑 设置contentEditable属性可以让div编程可编辑状态 2、可拖动： $('#move').draggable(); 使用jQuery UI的draggable可以让div变成可拖动状态，但是如果两个属性同时应用就会出现可编辑功能失效的状况。 3、可编辑、可拖动： contentEditable="t
Layui表格实现行拖拽并对拖拽结果重新排序
qq_41829337的博客
08-30 5115
Layui表格实现行拖拽并对拖拽结果重新排序
Layui 数据表格：用户个性化定制列（拖拽，隐藏）
夏已微凉、
07-24 1647
一、前言二、大致思路三、数据表设计四、后端实现1、用户进入页面时，获取用户的个性化设置2、用户点击工具栏时，请求接口，保存数据到数据表五、前端实现1、打开表格的列显示2、拖拽列3、进入页面，表格列加载处理4、点击 筛选列，数据保存到数据表六、具体操作 一、前言 大致效果是：当数据表格列太多时，用户只需要展示自己需要看到的比较重要的列，并且列支持拖拽。用户下次登录时，看到的是上次保存的数据。 二、大致思路 1、要实现用户个性化列，数据表是需要的，用于记录用户自定义的列 2、需要自定义显示、隐藏列，数据.
layui的layer iframe禁止缩放拖拽
heerey525
07-04 1万+
弹层组件文档 - layui.layerlayer 至今仍作为 layui 的代表作，她的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer已成为国内最多人使用的 Web 弹层组件，GitHub 自然Stars5000+，官网累...
div自由拖动（pc）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-24 1505
&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;js--div自由拖动（在body可以自由拖动）&lt;/title&gt;&lt;style&gt;.mydiv { position:fixed; width:400px; height:400px; b
html 可以拖动的div,多个div实现随意拖拽功能
weixin_42342626的博客
06-10 2468
鼠标事件mousedownmousemovemouseup注意事项:被拖动的div的position属性值一定是absolute。切记不可使用margin-top:10px;而应该使用top:10px;onmousedown事件需要在window.onload时加载。如果被拖动的div上有文字会有自带的文字拖动效果，需要将改div上的所有拖动事件绑定在该div上，可以使用setCapture。代码...
如何在HTML页面上自由移动DIV组件？
chinaycheng的专栏
08-25 5151
第一次使用CSDN自带markdown编辑器，界面不对，请谅解！如何在HTML页面上自由移动DIV组件？原理：所谓的div移动，是指div不停的变化和刷新位置坐标。解决步骤： 鼠标点击，获取需要移动的DIV DOM对象。 鼠标移动，计算移动值后调整DIV的位置。 代码示例：$("#"+this.props.softwareID).mousemove(function (event) {
如何让img在div中自由拖拽
06-07
可以使用HTML5中的draggable属性来实现在div中自由拖拽img元素。具体实现方法如下： 1. 首先，在img标签中添加draggable属性，将其设为true，表示该元素可被拖拽： ```html <img src="image.jpg" draggable="true" /> ``` 2. 在父元素div中添加以下三个事件处理程序： ```html <div ondragover="allowDrop(event)" ondrop="drop(event)" ondragstart="drag(event)"> <img src="image.jpg" draggable="true" /> </div> ``` 其中，ondragover事件处理程序用于防止默认行为，ondrop事件处理程序用于在拖拽结束时执行操作，ondragstart事件处理程序用于在拖拽开始时执行操作。 3. 在JavaScript中实现以上三个事件的具体操作，代码如下： ```javascript function allowDrop(event) { event.preventDefault(); } function drag(event) { event.dataTransfer.setData("text", event.target.id); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); event.target.appendChild(document.getElementById(data)); } ``` 其中，allowDrop()函数用于阻止默认行为，drag()函数用于在拖拽开始时将被拖拽元素的ID保存到dataTransfer对象中，drop()函数用于在拖拽结束时获取dataTransfer对象中保存的元素ID，并将该元素添加到目标容器中。 通过以上步骤，就可以在div中自由拖拽img元素了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值