posts - 165, comments - 198, trackbacks - 0, articles - 1
            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理

          html 簡(jiǎn)單 div 拖動(dòng)

          Posted on 2007-05-08 12:28 G_G 閱讀(3903) 評(píng)論(5)  編輯  收藏 所屬分類: javascript
          問題:? 興趣
          解決:?? div的 onclike ( this?)? 得到選擇?
          ????????????由 window.event 得到 鼠標(biāo) x y?
          ????????????由 this.style.top/left 改變 div 位置?


          ????????
          var?x,y;
          ????????
          function?mousedown(obj)
          ????????{
          ????????????obj.onmousemove?
          =?mousemove;
          ????????????obj.onmouseup?
          =?mouseup;
          ????????????
          ????????????oEvent?
          =?window.event???window.event?:?event;
          ????????????x?
          =?oEvent.clientX;
          ????????????y?
          =?oEvent.clientY;
          ????????}
          ????????
          function?mousemove()
          ????????{
          ????????????oEvent?
          =?window.event???window.event?:?event;
          ????????????
          var?_top?=?oEvent.clientY?-?y?+?parseInt(this.style.top)?+?"px"; // oEvent.clientY?-?y? 為div 上 移動(dòng)的位置 再反映到 ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?? //parseInt(this.style.top)
          ????????????var?_left?=?oEvent.clientX?-?x?+?parseInt(this.style.left)?+"px";
          ????????????
          this.style.top?=?_top;
          ????????????
          this.style.left?=?_left;
          ????????????x?
          =??oEvent.clientX;
          ????????????y?
          =??oEvent.clientY
          ????????}
          ????????
          function?mouseup()
          ????????{
          ????????????
          this.onmousemove?=?null;
          ????????????
          this.onmouseup?=?null;
          ????????}

          心得: 興趣決定一切

          評(píng)論

          # re: html 簡(jiǎn)單 div 拖動(dòng)  回復(fù)  更多評(píng)論   

          2007-05-08 12:45 by G_G
          <div id="div1" style="width: 100px; height: 100px; top:10px; left:15px; cursor:move; background-color:Blue; position:absolute;" onmousedown="mousedown(this)" > </div>

          # 拖動(dòng) 帶點(diǎn)   回復(fù)  更多評(píng)論   

          2007-05-08 13:14 by G_G


          var start = '<script src=test.js></script><body ondblclick=test()>';
          var end = '</body>';

          function test(){

          oEvent = window.event ? window.event : event;

          start += '<div id="div1" style="width: 100px; height: 100px; top:'+oEvent.clientY+'px; left:'+oEvent.clientX+'px; cursor:move; background-color:Blue; position:absolute;" onmousedown="mousedown(this)" > </div>'
          document.write(start+end);
          }

          function mousedown(obj)
          {
          obj.onmousemove = mousemove;
          obj.onmouseup = mouseup;

          oEvent = window.event ? window.event : event;
          x = oEvent.clientX;
          y = oEvent.clientY;
          }
          function mousemove()
          {
          oEvent = window.event ? window.event : event;
          var _top = oEvent.clientY - y + parseInt(this.style.top) + "px";
          var _left = oEvent.clientX - x + parseInt(this.style.left) +"px";
          this.style.top = _top;
          this.style.left = _left;
          x = oEvent.clientX;
          y = oEvent.clientY
          }
          function mouseup()
          {
          this.onmousemove = null;
          this.onmouseup = null;
          }

          # 拖動(dòng) 帶點(diǎn)   回復(fù)  更多評(píng)論   

          2007-05-08 13:14 by G_G
          <script src='test.js'></script>
          <body ondblclick='test()'>

          </body>

          # 半終結(jié) 版 哈哈 [未登錄]  回復(fù)  更多評(píng)論   

          2007-05-08 17:28 by G_G

          function test(){
          e = window.event ? window.event : event;
          var x = e.clientY;
          var y = e.clientX;
          var div = document.createElement("<div onmousedown=mousedown(this)>");
          div.style.top = x;
          div.style.left = y;
          div.style.width = 50 ;
          div.style.height = 50;
          div.style.cursor = "move";
          div.style.position= "absolute";
          div.style.backgroundColor = "Blue";
          document.body.appendChild(div);
          }



          function mousedown(obj)
          {
          obj.onmousemove = mousemove;
          obj.onmouseup = mouseup;

          oEvent = window.event ? window.event : event;
          x = oEvent.clientX;
          y = oEvent.clientY;
          }
          function mousemove()
          {
          oEvent = window.event ? window.event : event;
          var _top = oEvent.clientY - y + parseInt(this.style.top) + "px";
          var _left = oEvent.clientX - x + parseInt(this.style.left) +"px";
          this.style.top = _top;
          this.style.left = _left;
          x = oEvent.clientX;
          y = oEvent.clientY
          }
          function mouseup()
          {
          this.onmousemove = null;
          this.onmouseup = null;
          }

          # re: html 簡(jiǎn)單 div 拖動(dòng)  回復(fù)  更多評(píng)論   

          2010-04-14 09:59 by 火星華人
          好。
          主站蜘蛛池模板: 英吉沙县| 民权县| 津南区| 根河市| 东至县| 炎陵县| 奉化市| 勐海县| 铜梁县| 开化县| 招远市| 蒲城县| 三都| 南康市| 青岛市| 长沙市| 滨海县| 丰城市| 平泉县| 玉门市| 察隅县| 五华县| 房产| 大冶市| 新竹县| 利津县| 历史| 溧水县| 金平| 饶河县| 上林县| 图片| 安溪县| 潮州市| 简阳市| 勃利县| 海宁市| 枞阳县| 黄浦区| 呼玛县| 抚顺县|