文档章节

web拖拽 Web组件流畅拖动效果

史文帝
 史文帝
发布于 2018/03/09 18:10
字数 147
阅读 55
收藏 0
<!DOCTYPE html>
<html>

<head>
    <title>move</title>
</head>
<style type="text/css">
    .body_css {
    width: 100%;
    height: 100%;
    position: absolute;
}

.div_css {
    width: 100px;
    height: 100px;
    background-color: #000;
    position: absolute;
    left: 0px;
    top: 0px;
    color: #fff;
    user-select: none;
}
</style>
<script type="text/javascript">
    window.onload = function() {
        var d = document.getElementById('div');
        var b = document.getElementById('body');
        d.addEventListener("mousedown", function(ed) {
            var flag = true;
            var dl = d.offsetLeft;
            var dt = d.offsetTop;
            b.addEventListener("mousemove", function(em) {
                if (flag) {
                    d.style.left = dl + em.clientX - ed.clientX + "px";
                    d.style.top = dt + em.clientY - ed.clientY + "px";
                }
            });
            b.addEventListener("mouseup", function() {
                flag = false;
            });
        });
    }
</script>

<body id="body" class="body_css">
<div id="div" class="div_css">鼠标点击我,进行拖拽</div>
<a href="http://121.12.170.102:8280/wy/web/tuozhuai.html">效果访问地址</a>
</body>

</html>

 

效果预览地址: http://121.12.170.102:8280/wy/web/tuozhuai.html

© 著作权归作者所有

共有 人打赏支持
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
私信 提问
UGUI: 如何简单地写出UI拖拽移动效果

直接上代码 using UnityEngine;using UnityEngine.UI;using UnityEngine.EventSystems;namespace Script{class UIDragMover : MonoBehaviour{public Image Body;//ui元素的本体, panel等pub......

u013983442
2018/04/13
0
0
100行代码解析Dojo树控件拖拽案例

案例设定: 创建2个树控件,左右排列。 使用拖动的方式,将树节点从左侧树控件拖拽的右侧树控件。 拖拽过程中右侧树控件要进行验证,确认是否可以方式拖拽中的节点。 放置的处理,识别要放置...

小伙伴伴
2018/04/25
0
0
JavaSwing_5.5: 拖拽功能

本文链接: http://blog.csdn.net/xietansheng/article/details/78389272 Java Swing 图形界面开发(目录) 拖拽功能的使用非常普遍。例如打开U盘文件夹,把U盘的文件拖到桌面;把选中的文件拖...

xietansheng
2017/10/29
0
0
【React Native开发】React Native控件之ViewPagerAndroid讲解以及美团首页顶部效果实例(17)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jiangqq781931404/article/details/50619122 import React, {AppRegistry,Component,StyleSheet,Text,View,Vi......

江清清
2016/02/01
0
0
原型交互设计入门,我该选哪个工具?

交互设计是我们原型设计中很重要的一部分, 如何快速掌握一个原型设计工具,尽快入门,高效地完成工作? 这里选择了三款原型设计工具作对比,希望给想入门或者刚入门的童鞋提供一些参考。 Ax...

jongde
2016/09/18
54
3

没有更多内容

加载失败,请刷新页面

加载更多

深入 理解char * ,char ** ,char a[ ] ,char *a[] 的区别

C语言中由于指针的灵活性,导致指针能代替数组使用,或者混合使用,这些导致了许多指针和数组的迷惑,因此,刻意再次深入探究了指针和数组这玩意儿,其他类型的数组比较简单,容易混淆的是字...

天王盖地虎626
29分钟前
3
0
关于我这三年的架构历程(待完成)

从16年7月实习至今,快三年的开发经历中,经手了好几个项目。目前有幸作为一个项目的负责人,完成了一个项目的完全架构设计。因此想记录下这份架构设计中的点点面面。 总架构: 基于DNS的负载...

赵熠熠
30分钟前
1
0
springboot 使用 flyway 进行数据库版本管理

要在启动时自动运行Flyway数据库迁移,请将其添加 org.flywaydb:flyway-core到类路径中。 迁移是表单中的脚本V<VERSION>__<NAME>.sql(使用<VERSION>下划线分隔的版本,例如“1”或“2_1”)...

NotFound403
49分钟前
5
0
spring 5.1.5版本(二)

spring 5.1.5版本(一) spring 5.1.5版本(二) spring 5.1.5版本(三) 对象创建方式 方式一 applicationContext.xml <?xml version='1.0' encoding='UTF-8'?><beans xmlns="http://ww......

gwl_
50分钟前
1
0
CMake生成Mingw用的Make文件

CMake 在win下 默认会生成vc++的nmake用的make 当没安装时 就会报 -- Building for: NMake Makefiles -- The C compiler identification is unknown -- The CXX compiler identification is......

shzwork
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部