拖拽事件--select外边框拖拽
地图上面的搜索框要可拖拽
但是搜索框是有点击事件的,点击显隐下拉菜单,如果拖拽的事件源选择select框的话,会有样式(十字拖动符cursor:move与selelt默认点击的箭头)冲突
思索良久,就用外边距区域做事件源啊,废话不多,看代码。。。。
1、html页面放置的select搜索框(注意看哦,重点是h6标签哦)
==请选择==
1
2
2、以下是样式
#searchbox {
border:1px solid #fff;
position:absolute;
left:50px;
top:50px;
}
#searchbox select{
width:350px;
height: 40px;
}
#searchbox h6.search-top {
position:absolute;
top:-6px;
left:0;
width:100%;
height:6px;
line-height:6px;
color:white;
cursor:move;
}
#searchbox h6.search-bottom {
position:absolute;
bottom:-6px;
left:0;
width:100%;
height:6px;
line-height:6px;
color:white;
cursor:move;
}
#searchbox h6.search-left {
position:absolute;
bottom:0;
left:-6px;
width:6px;
height:100%;
color:white;
cursor:move;
}
#searchbox h6.search-right {
position:absolute;
bottom:0;
right:-6px;
width:6px;
height:100%;
color:white;
cursor:move;
}
3、以下是js方法哦(方法有参考某个童鞋的,时间久忘记名字了,此处不明示了,理解一下哦)
function drag(obj) {
if (typeof obj === 'string') {
var obj = document.getElementById(obj);
} else {
var obj = obj;
}
function fixEvent(event) {
event.target = event.srcElement;
event.preventDefault = fixEvent.preventDefault;
return event;
}
fixEvent.preventDefault = function () {
this.returnValue = false;
};
obj.onmousedown = mousedown;
function mousedown(e) {
var e = e || fixEvent(window.event);
var disX = e.clientX - obj.offsetLeft;
var disY = e.clientY - obj.offsetTop;
if (e.target.tagName === 'H6') {
document.onmousemove = move;
document.onmouseup = up;
} else {
document.onmousemove = null;
document.onmouseup = null;
}
function move(e) {
var e = e || fixEvent(window.event);
var left = e.clientX - disX;
var top = e.clientY - disY;
if (obj.setCapture) {
obj.setCapture();
}
if (left < 0) {
left = 0;
} else if (left > document.documentElement.clientWidth - obj.offsetWidth) {
left = document.documentElement.clientWidth - obj.offsetWidth;
}
if (top < 0) {
top = 0;
} else if (top > document.documentElement.clientHeight - obj.offsetHeight) {
top = document.documentElement.clientHeight - obj.offsetHeight;
}
obj.style.left = left + 'px';
obj.style.top = top + 'px';
return false;
};
function up() {
if (obj.releaseCapture) {
obj.releaseCapture();
}
document.onmousemove = null;
document.onmouseup = null;
}
};
}
4、然后是js页面调用方法
window.onload = function () {
var trigger = document.getElementById('searchbox');
drag(trigger);
};
综上:此拖拽事件已搞定,如有问题留言探讨,转载请注明出处。
拖拽事件--select外边框拖拽的更多相关文章
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Qt 无边框拖拽实现
Qt 无边框拖拽实现 头文件定义: class TDragProxy:public QObject { Q_OBJECT public: TDragProxy(QWidget* parent); ~T ...
- 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件
前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它 打个比方:<海贼王> ...
- Android Launcher拖拽事件详解【android4.0--Launcher系列二】
AndroidICS4.0版本的launcher拖 拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一 直 ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- H5原生拖拽事件
使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态
多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...
- Duilib嵌入CEF禁止浏览器响应拖拽事件
转载:http://blog.csdn.net/liuyan20092009/article/details/53819473 转载:https://blog.csdn.net/u012778714( ...
- IOS 拖拽事件(手势识别)
@interface NJViewController () @property (weak, nonatomic) IBOutlet UIView *customView; @end @implem ...
随机推荐
- vue_cli下开发一个简单的模块权限系统之展现数据
这个页面是用户列表:userList就是第二张截图中的data里面的userList vue中只要改变存放数据的载体就会实现页面改变,mounted的意思是页面加载时执行这里面的函数,我们需要在页面加 ...
- Chrome插件-Postman Interceptor
postman有一个chrome插件 Postman Interceptor,可以让postman中发送请求的时候使用这个网站的浏览器cookie Postman Interceptor,可以让pos ...
- 搜索【洛谷P2845】 [USACO15DEC]Switching on the Lights 开关灯
P2845 [USACO15DEC]Switching on the Lights 开关灯 题目背景 来源:usaco-2015-dec Farm John 最近新建了一批巨大的牛棚.这些牛棚构成了一 ...
- DockerFile一键搭建环境(一)
点击查看文件详情 FROM centos:7 COPY --chown=root:root nginx /etc/init.d/ Run set -ex \ && yum insta ...
- clang -O3 for循环的LLVM IR
O3都是怪物,这里分析的是CLANG怪物,示例程序遍历数组每个元素然后放大. void foreach_scale(int arr[],int elem){ for(int i=0;i<elem ...
- C++基础学习9:构造函数和析构函数
1. 构造函数用来对类对象进行初始化,它完成对内存空间的申请.赋初值等工作. 2. 析构函数主要是用来做清理工作的. 补充:函数名或变量名前面有"::"但是没有类名,说明这是 ...
- opencv-视频基本操作
写视频 # encoding: utf-8 ''' @author: gaoyongxian666 @file: opencv_video_write.py @time: 2018/4/15 11:1 ...
- 实施MySQL ReplicationDriver支持读写分离
MySQL 提供支持读写分离的驱动类: com.mysql.jdbc.ReplicationDriver 替代 com.mysql.jdbc.Driver 注意,所有参数主从统一: jdbc:mysq ...
- webpack4.0入门配置文件
wepback风头正火 ,但是公司一直在用gulp,正好赶上年底活动,借此机会第一次尝试了webpack,说实话webpack真的很强大,内容一层一层递进. 这几天跟着官网跑了一遍,然后写了自己的配置 ...
- Kibana问题搜集---下载源码,执行npm install 报错
npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! chromedriver@2.34.0 install: `node install.js`npm E ...