纯射流研究…实现的积木(div层)拖动功能示例

本文实例讲述了纯射流研究…实现的积木(div层)拖动功能。分享给大家供大家参考，具体如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题拖动/title style type=' text/CSS '/style/head body id=' content '输入类型=' button '值='获取积木id=' div 3 '/正文脚本/生成积木document.getElementById('div3 ').onclick=function(){ var num=getnumber()；var num 1=get number()；var num 2=get number()；var num 3=get number()；var divs=' div id=' s ' num ' ' style=' width : 200 px；高度： 200像素；绝对位置：background:rgb(' num1 '，' num2 '，' num 3 ')'/div '文档。getelementbyid(' content ').insertAdjacentHTML('beforeEnd '，div s)；darg 1(' s ' num ' ')；};//h获取随机数，获取随机颜色函数get number(){ return ParSeint(Math)。random()* 255)；} //拖动积木函数darg 1(id){ var obj=document。getelementbyid(id)；var objx=0；var objy=0；obj.onmousedown=function(偶数){ //鼠标到差异的距离objx=偶数。clientx-obj。offsetleftobjy=偶数。客户-对象。偏移；//div移动的距离=鼠标到父窗口的距离-鼠标到差异的距离文件。onmousemove=function(偶数){ obj。风格。左=偶数。pagex-objx ' px '；物体。风格。top=偶数。pagey-objy ' px '；};文件。onmouseup=function(){ document。onmousemove=nulldocument . onmouseup=null }；};返回false}/scripthtml点击按钮按钮，获取积木，获取积木后可以在浏览器内随意拖动生成的积木：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript数据结构与算法技巧总结》 、 《JavaScript数学运算用法总结》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 及《JavaScript遍历算法与技巧总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。