StrangeElement

by d-kami 2010-06-01 [2010/06/01 12:10:10]

リンクやボタン、画像などをドラッグで移動できます。ただそれだけです。Firefox限定？動作不安定(うまくドラッグできなかったり、位置がおかしかったり)

• /*
   * @title StrangeElement
   * @description リンクやボタン、画像などをドラッグで移動できます。ただそれだけです。Firefox限定？動作不安定(うまくドラッグできなかったり、位置がおかしかったり)
   * @include http://*
   * @license MIT License
   * @require 
   */
  
  (function(){
      var nodeNames = ["BODY", "A", "INPUT", "IMG", "SPAN", "DIV", "TEXTAREA"];
  
      var target = null;
      var oldBorder = "";
      var mouseX = -1;
      var mouseY = -1;
  
      function addEvent(node){
          if(nodeCheck(node)){
              addClick(node);
              addMouseDown(node);
          }
  
          var children = node.childNodes;
  
          for(var i = 0; i < children.length; i++){
              addEvent(children[i]);
          }
      }
  
      function addClick(node){
          node.addEventListener("click", function(e){
              e.stopPropagation();
              e.preventDefault();            
          }, false);
      }
  
      function addMouseDown(node){
          node.addEventListener("mousedown", function(e){
              target = node;
              oldBorder = node.style.border;
  
              target.style.border = "solid 1px blue";
              target.style.position = "absolute";
              target.style.left = e.screenX + "px";
              target.style.top = e.screenY + "px";
  
              e.stopPropagation();
              e.preventDefault();
          }, false);
      }
  
      function addMouseMove(node){
          node.addEventListener("mousemove", function(e){
              if(target){
                  target.style.left = e.clientX + "px";
                  target.style.top = e.clientY + "px";
  
                  e.stopPropagation();
                  e.preventDefault();
              }
          }, false);
      }
  
      function addMouseUp(node){
          node.addEventListener("mouseup", function(e){
              mouseX = -1;
              target.style.border = oldBorder;
              target = null;
  
              e.stopPropagation();
              e.preventDefault();
          }, false);
      }
  
      function nodeCheck(node){
          for(var i = 0; i < nodeNames.length; i++){
              if(nodeNames[i] == node.nodeName){
                  return true;
              }
          }
  
          return false;
      }
  
      document.getElementsByTagName("HTML")[0].style.position = "absolute";
      addEvent(document);
      addMouseUp(document);
      addMouseMove(document);
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。