拖拽事件--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 ...
随机推荐
- Set去掉重复的元素
String[] uids= request.getParameterValues("dxus");获取页面传过来的id //--------------------------- ...
- tomcat的热部署配置
1.什么是tomcat热部署? 所谓的tomcat热部署,就是在不重启tomcat服务器的前提下,将自己的项目部署到tomcat服务器中,这种方式是非常方便的,也称之为“开发即用”,热部署分为手动热部 ...
- spring自定义 xsd 位置
与元素类型 "beans" 相关联的属性 "xsi:schemaLocation" 的前缀 "xsi" 未绑定. 解决办法:(绿色字体) & ...
- hdu6397 Character Encoding 隔板法+容斥原理+线性逆元方程
题目传送门 题意:给出n,m,k,用m个0到n-1的数字凑出k,问方案数,mod一个值. 题目思路: 首先如果去掉数字范围的限制,那么就是隔板法,先复习一下隔板法. ①k个相同的小球放入m个不同的盒子 ...
- HDU1085 Holding Bin-Laden Captive!
Description We all know that Bin-Laden is a notorious terrorist, and he has disappeared for a long t ...
- photoshop特效字体
一.3D效果字 3D效果文字给人以纵伸感.立体感和真实感,是商家常用到的一种宣传文字.虽然Photoshop软件是平面软件,但是在制作3D效果文字时却游刃有余. 3D效果字的制作可分以下三步完成. 输 ...
- day13 内置函数二 递归,匿名函数,二分法
.匿名函数(名字统一叫lambda) .语法 lambda 参数:返回值 .参数可以有多个,用逗号隔开 .只能写一行,执行结束后直接返回值 4返回值和正常函数一样,可以是任意值 .列: f=lambd ...
- Socket通信客户端和服务端代码
这两天研究了下Socket通信,简单实现的客户端和服务端代码 先上winfrom图片,客户端和服务端一样 服务端代码: using System; using System.Collections.G ...
- hadoop "startdfs.sh" WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable
这个waring 信息是可以忽略的.下面是解决方案 在hadoop-env.sh中添加 export HADOOP_OPTS="$HADOOP_OPTS -Djava.library.pat ...
- ctrip-apollo
云端多网卡问题: 参考:https://blog.csdn.net/buyaore_wo/article/details/79847404