Heim >Web-Frontend >js-Tutorial >可以用鼠标拖动的DIV实现思路及代码_javascript技巧

可以用鼠标拖动的DIV实现思路及代码_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:19:28887Durchsuche
复制代码 代码如下:


测试可动div




style="cursor:move;position:absolute;width:100px;height:60px;border:1px solid

silver;left:100px;top:100px;z-index:9999;">



document.all[]是文档中所有标签组成的一个数组变量,包括了文档对象中所有元素;
event.button的值:0没按键 1按左键 2按右键 3按左和右键 4按中间键 5按左和中间键 6按右和中间键 7按所有的键

下面对此代码进行改进,模仿window,并且让它可以盖住select
复制代码 代码如下:




测试可动div




style="cursor:move;width:100%;height:15px;background-color:#0066cc; font-size:10px;">
X


测试一下







现在这个可拖动的div是不是好很多了?不用担心select了。之前放出来的只能在IE下正常工作,主要是用了parentElement,现在我把它换成parentNode,调整了CSS样式,这样在FF下也能正常运行了。
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn