地图上面的搜索框要可拖拽
但是搜索框是有点击事件的,点击显隐下拉菜单,如果拖拽的事件源选择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. Android自动化----adb shell,appium,uiautomator2

    1.区别 1,adb shell脚本的方式 不但可以在有电脑的情况下使用,通过数据线连接电脑然后adb shell命令,而且还可以打包成app,在手机的终端使用adb shell命令. 2,appiu ...

  2. 【记录一下】从0到1 我的python开发之路

    请设计实现一个商城系统,商城主要提供两个功能:商品管理.会员管理. 商品管理: - 查看商品列表 - 根据关键字搜索指定商品 - 录入商品 会员管理:[无需开发,如选择则提示此功能不可用,正在开发中, ...

  3. Eclipse使用Ctrl+C和Ctrl+V复制粘贴时总是卡顿

    Eclipse使用Ctrl+C和Ctrl+V复制粘贴时总是卡顿,解决办法: 更改打开代码超链接按键Ctrl为Alt: Window -> Preferences -> General -& ...

  4. 奇妙的 clip-path 几何图形

    CSS 新属性 clip-path,意味裁剪路径的意思,让我们可以很便捷的生成各种几何图形. clip-path 通过定义特殊的路径,实现我们想要的图形.而这个路径,正是 SVG 中的 path . ...

  5. C语言ctype.h字符函数和字符串

    ctype.h存的是与字符相关的函数: 这些函数虽然不能处理整个字符串,但是可以处理字符串中的字符: ToUpper()函数,利用toupper()函数处理字符串中的每个字符,转换成大写: Punct ...

  6. Kibana6.x.x源码分析--启动时basePath

    每次启动Kibana时,发现URL都会随机的生成三位字母,比如:[http://localhost:5601/abc/][http://localhost:5601/dzf/]等等,那么这些随机的字符 ...

  7. Codeforces - 625B 贪心

    求最小不重复匹配次数 改最后一个字符最划算 我当时怎么就没看出来.. #include<bits/stdc++.h> using namespace std; string S,T; in ...

  8. 10-排序6 Sort with Swap(0, i) (25 分)

    Given any permutation of the numbers {0, 1, 2,..., N−1}, it is easy to sort them in increasing order ...

  9. Linux 防火墙iptables 实例

    iptables的基本语法格式 iptables [-t 表名] 命令选项 [链名] [条件匹配] [-j 目标动作或跳转] 说明:表名.链名用于指定iptables命令所操作的表和链,命令选项用于指 ...

  10. ZPL JS 调用共享打印机

    <script type="text/javascript"> function printZpl(zpl) {var printWindow = window.ope ...