拖拽事件--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下开发一个简单的模块权限系统之实现登录
因为我们需要和后端数据交互,所以我们需要安装axios,安装好以后在main.js引入 v-model是标识空间,v-on:click="doLogin"是登录事件 doLogin ...
- Windows Server 2016 IIS10安装URLRewrite 2.0组件方法
1,打开Regedit> HKEY_LOCAL_MACHINE \ SOFTWARE \ Microsoft \ InetStp2,编辑“MajorVersion”并以十进制设置数值数据值为93 ...
- mysql的时区错误问题
JDBC连接数据库报错如下: java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or r ...
- Vue-Router路由Vue-CLI脚手架和模块化开发 之 路由的动态跳转
在上一篇的博文中,实现的跳转是在页面中进行实现的 利用vue-router实例方法,使用js对路由进行动态跳转: 1.router.push:参数为路由对象,跳转到指定路由,跳转后会产生历史记录: & ...
- zmq导致master收不到minion的key
问题: 官网方式yum安装完saltstack之后,master与minion都成功启动后,但是却发现怎么都收不到minion的key.(zmq版本不一致所致,困扰了我好几天,希望能帮到大家.) 分析 ...
- Linux(ubuntu)下固定IP的方法
写在前面,问:为什么要固定ip.答:要知道固定IP的好处多多,随意搬动,固定共享地址,不怕断网等等 首先,我们要选取一个局域网内的IP,方法如下: 1.选取IP号段,一般是路由器DCHP以外的IP地址 ...
- php返回数据格式
PHP返回HTML代码: header('Content-type:text/html; charset=utf-8'); PHP返回xml代码:header('content-type: t ...
- 6.SpringMVC2
1.视图解析 当客户端发出请求后,交由SpringMVC的DispatcherServlet处理,接着Spring会分析看哪一个HandlerMapping定义的所有请求映射中对该请求的最合理的映射, ...
- No bean named 'xxxxxxx' available--springboot 上线打war包
springboot项目发布上线后,报错:No bean named 'xxxxxxx' available 因为我开发时pom用的jar,但上线发布war.解决方法: 1.pom.xml <p ...
- vue的watch详细用法
https://www.cnblogs.com/shiningly/p/9471067.html https://www.jb51.net/article/139282.htm