地图上面的搜索框要可拖拽
但是搜索框是有点击事件的,点击显隐下拉菜单,如果拖拽的事件源选择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外边框拖拽的更多相关文章

  1. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. Qt 无边框拖拽实现

    Qt 无边框拖拽实现 头文件定义: class TDragProxy:public QObject { Q_OBJECT public: TDragProxy(QWidget* parent); ~T ...

  3. 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

    前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它   打个比方:<海贼王> ...

  4. Android Launcher拖拽事件详解【android4.0--Launcher系列二】

    AndroidICS4.0版本的launcher拖 拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一 直 ...

  5. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  6. H5原生拖拽事件

    使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

  8. Duilib嵌入CEF禁止浏览器响应拖拽事件

    转载:http://blog.csdn.net/liuyan20092009/article/details/53819473 转载:https://blog.csdn.net/u012778714( ...

  9. IOS 拖拽事件(手势识别)

    @interface NJViewController () @property (weak, nonatomic) IBOutlet UIView *customView; @end @implem ...

随机推荐

  1. flink学习笔记-快速生成Flink项目

    说明:本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKh ...

  2. 公有云Docker镜像P2P加速之路:安全篇

    一.问题 在使用Docker运行容器化应用时,宿主机通常先要从Registry服务(如Docker Hub)下载相应的镜像(image).这种镜像机制在开发环境中使用还是很有效的,团队成员之间可以很方 ...

  3. linux下虚拟主机配置

    <VirtualHost *:80>ServerAdmin  admin@localhostServerName   www.baidu.org DocumentRoot "/d ...

  4. Qt 学习之路 2(23):自定义事件

    Qt 学习之路 2(23):自定义事件  豆子  2012年10月23日  Qt 学习之路 2  21条评论 尽管 Qt 已经提供了很多事件,但对于更加千变万化的需求来说,有限的事件都是不够的.例如, ...

  5. 安装gitlab-runner

    # 下载 $sudo wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/lat ...

  6. 2015苏州大学ACM-ICPC集训队选拔赛(2)1004

    草爷要的数 Problem Description 今天校队队员们准备放松一下,我们队就准备选一些数字玩,然而每个人喜欢的数字是不同的,刻盘喜欢x(1<=x<=1^9),凯凯喜欢y(1&l ...

  7. JS函数调用分析过程

  8. 经典SQL行列转换

    -- http://www.programbbs.com/doc/4885.htm /* 标题:普通行列转换(version 2.0) 说明:普通行列转换(version 1.0)仅针对sql ser ...

  9. matplolib实例之 城市气候与海洋的关系研究

  10. django组件之中间件

    中间件的概念 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影响到 ...