// ==UserScript==
// @name         随意拖拽DOM元素
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  网页上元素这么多，你不想像堆积木一样拖着玩玩看吗，该脚本在页面加载一个悬浮窗，双击后可以任意拖拽、消除网页内的元素，包括广告等，不会影响网页的原本功能，拖到浏览器最左边可以删除元素,移到上方还原。
// @author       readerror
// @include      *
// @grant        none
// @license MIT
// @downloadURL none
// ==/UserScript==
(function(){
  'use strict';
    var deleteMode = 0;
    if(self != top) return;//不要再iframe里再加载一次
    var new_element_N=document.createElement("style");
    new_element_N.innerHTML = '#dragerDom {' +
        '   position: fixed;' +
        '   width: 20px;' +
        '   height: 20px;' +
        '   background-color: rgba(0, 0, 127, 0.2);' +
        '   z-index: 10000000000;' +
        '   cursor: pointer;' +
        '   top: 0px;' +
        '   left: 0px;' +
        '   border-radius: 30%;' +
        '   padding: 6px;' +
        ' }' +
        ' ' +
        ' #dragerDom>div {' +
        '   border-radius: 50%;' +
        '   width: 100%;' +
        '   height: 100%;' +
        '   background-color: rgba(0, 0, 127, 0.3);' +
        '   transition: all 0.2s;' +
        '  -webkit-transition: all 0.2s;' +
        '  -moz-transition: all 0.2s;' +
        '  -o-transition: all 0.2s;' +
        ' }' +
        ' #dragerDom:hover>div{' +
        '   background-color: rgba(0, 0, 127, 0.6);' +
        ' } '+
        '.showMessageDom {padding: 10px 20px;border-radius: 5px;position: fixed;top: 15%;left: 50%;color: #ffffff;z-index: 999;transform: translate(-50%, 0);}'+
        '.showMessageSuccessDom {background-color: #f0f9eb;border: 1px solid #E1F3D8;color: #67c23a;}'+
        '.showMessageErrorDom {background-color: #fef0f0;border: 1px solid #fde2e2;color: #F76C6C;}'+
        '.chosenBorder{opacity:0.77; box-shadow: inset 0px 0px 0px 0.5px #ff0000; color:red; background-size: 21vw 4.2vw; background-color: rgb(247, 108, 108, 0.5); box-sizing: border-box; -moz-box-sizing: border-box;}';
    document.body.appendChild(new_element_N);
    new_element_N=document.createElement('div');
    new_element_N.setAttribute("id","dragerDom");
    new_element_N.style.top="80px";
    new_element_N.style.left = (document.body.clientWidth-45)+"px";
    new_element_N.innerHTML = ' <div></div>' ;
    document.body.appendChild(new_element_N);
    //
    var posX;
    var posY;
    var screenWidth =document.documentElement.clientWidth;
    var screenHeight = document.documentElement.clientHeight;
    var fdiv = document.getElementById("dragerDom");
    fdiv.onmousedown=function(e)
    {
      screenWidth =document.documentElement.clientWidth;
      screenHeight = document.documentElement.clientHeight;
      if(!e){ e = window.event; } //IE
      posX = e.clientX - parseInt(fdiv.style.left);
      posY = e.clientY - parseInt(fdiv.style.top);
      document.onmousemove = mousemove;
    }
    function showMessage(message, type) {
        let messageJQ= $("<div class='showMessageDom'>" + message + "</div>");
        if (type == 0) {
            messageJQ.addClass("showMessageErrorDom");
        } else if (type == 1) {
            messageJQ.addClass("showMessageSuccessDom");
        }
        // 先将原始隐藏，然后添加到页面，最后以400毫秒的速度下拉显示出来
        messageJQ.hide().appendTo("body").slideDown(400);
        // 4秒之后自动删除生成的元素
        window.setTimeout(function() {
            messageJQ.show().slideUp(400, function() {
                messageJQ.remove();
            })
        }, 4000);
    }
    document.onmouseup = function()//释放时自动贴到最近位置
    {
      document.onmousemove = null;
      if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(screenHeight/2)){//在上半部分
        if((parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)<=(screenWidth/2)){//在左半部分
          if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)){//靠近上方
            fdiv.style.top="0px";
          }else{//靠近左边
            fdiv.style.left="0px";
          }
        }else{//在右半部分
          if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(screenWidth-(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)) ){//靠近上方
            fdiv.style.top="0px";
          }else{//靠近右边
            fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
          }
        }
      }else{ //下半部分
         if((parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)<=(screenWidth/2)){//在左半部分
          if( (screenHeight-(parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2))<=(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)){//靠近下方
            fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
          }else{//靠近左边
            fdiv.style.left="0px";
          }
        }else{//在右半部分
          if( (screenHeight-(parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2))<=(screenWidth-(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)) ){//靠近上方
            fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
          }else{//靠近右边
            fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
          }
        }
      }
    }
    function mousemove(ev)
    {
      if(ev==null){ ev = window.event;}//IE
      if((ev.clientY - posY)<=0){//超过顶部
         fdiv.style.top="0px";
      }else if((ev.clientY - posY) >(screenHeight-parseInt(fdiv.clientHeight))){//超过底部
        fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
      }else{
        fdiv.style.top = (ev.clientY - posY) + "px";
      }
       if((ev.clientX- posX)<=0){//超过左边
         fdiv.style.left="0px";
      }else if((ev.clientX - posX) >(screenWidth-parseInt(fdiv.clientWidth))){//超过右边
        fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
      }else{
        fdiv.style.left = (ev.clientX - posX) + "px";
      }
      // console.log( posX +" "+ fdiv.style.left);
    }
    window.onload = window.onresize = function() { //窗口大小改变事件
      screenWidth =document.documentElement.clientWidth;
      screenHeight = document.documentElement.clientHeight;
      if( (parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight))>screenHeight){//窗口改变适应超出的部分
         fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
      }
      if( (parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth))>screenWidth){//窗口改变适应超出的部分
         fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
      }
      document.onmouseup.apply()
    };
    fdiv.addEventListener('touchstart', fdiv.onmousedown, false);
    fdiv.addEventListener('touchmove', function(event) {
            // 如果这个元素的位置内只有一个手指的话
            if (event.targetTouches.length == 1) {
          　　　　 event.preventDefault();// 阻止浏览器默认事件，重要
              var touch = event.targetTouches[0];
              if((touch.pageY)<=0){//超过顶部
                fdiv.style.top="0px";
              }else if(touch.pageY>(screenHeight-parseInt(fdiv.clientHeight))){//超过底部
                fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
              }else{
                fdiv.style.top = (touch.pageY-parseInt(fdiv.clientHeight)/2) + "px";
              }
              if(touch.pageX<=0){//超过左边
                fdiv.style.left="0px";
              }else if( touch.pageX >(screenWidth-parseInt(fdiv.clientWidth))){//超过右边
                fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
              }else{
                fdiv.style.left = (touch.pageX-parseInt(fdiv.clientWidth)/2) + "px";
              }
            }
          }, false);
    fdiv.addEventListener('touchend', document.onmouseup , false);
   if (typeof(jQuery) == 'undefined'||$("dragerDom").on==undefined) {
        let script = document.createElement('script');
        script.setAttribute('src', 'https://code.jquery.com/jquery-3.1.1.min.js');
        document.getElementsByTagName('head')[0].appendChild(script);
    }
    let addDom = null;
    fdiv.ondblclick=function(){//双击事件可能在手机端浏览器会与网页缩放事件冲突
      if(deleteMode==0){//进入删除模式
        deleteMode = 1;
         $(this).addClass("chosenBorder");


          let position = {
            x: 0,
        y: 0,
        left: 0,
        top: 0,
      }
             let target = null
      let rawStyle = null
      let tarr = null
      let pname = ''
      let isDown = false
      let isHide = false
      let rawOpacity = 1
        //加边框知道选中了哪个
        $("*").hover(
            function(event){
                if(deleteMode==1){
                  if(event.currentTarget.id=="dragerDom"||event.currentTarget.parentNode.id=="dragerDom"||isDown) return false;
                  $(this).addClass("chosenBorder");
                  if (addDom){
                      addDom.remove()
                  }
                  addDom = $("<div id='addDomadddom' style='clear:both; opacity:1; width:7px; white-space: nowrap; overflow: visible; font-size: 11px;  background-color: rgb(127, 217, 217, 0.77); font-weight:1100; z-index: 100000000; position: absolute; top:1; left:1; color: blue;'></div>").text('o')
                  let styleD = getComputedStyle(event.currentTarget, null)
                  rawOpacity = event.currentTarget.style.opacity
                  event.currentTarget.style.opacity = 0.77
                  let tmpDom002 = $("<div style='clear:both; opacity:1; width:7px; white-space: nowrap; overflow: visible; font-size: 11px;'></div>").text("移动到最左边删除，移到页面顶部可还原: ")
                  addDom.append(tmpDom002)
                  let tmpDom001 = $("<div style='clear:both; opacity:1; width:7px; white-space: nowrap; overflow: visible; font-size: 11px;'></div>").text(event.currentTarget.parentNode.nodeName+'.'+event.currentTarget.className)
                  addDom.append(tmpDom001)
                  let tmpDom0 = $("<div style='clear:both; opacity:1; width:7px; white-space: nowrap; overflow: visible; font-size: 11px;'></div>").text("width:"+ styleD['width'])
                  addDom.append(tmpDom0)
                  let tmpDom1 = $("<div style='clear:both; opacity:1; width:7px; white-space: nowrap; overflow: visible; font-size: 11px;'></div>").text("height:"+ styleD['height'])
                  addDom.append(tmpDom1)
                  let zi = styleD['z-index']
                  let tmpDom2 = $("<div style='clear:both; opacity:1; width:7px; white-space: nowrap; overflow: visible; font-size: 11px;'></div>").text("z-index:"+ zi)
                  addDom.append(tmpDom2)
                  $(this).before(addDom)
                  return false;
                }
            },
            function(){
              if(deleteMode==1){
                 if(event.currentTarget.id=="dragerDom"||event.currentTarget.parentNode.id=="dragerDom"||isDown) return false;
                 $(this).removeClass("chosenBorder");
                 event.currentTarget.style.opacity = rawOpacity
                 if (addDom){
                     addDom.remove()
                     addDom = null
                 }
              }
            }
        );
     var cloneObj = function (obj) {
         var newObj = {};
         if (obj instanceof Array) {
             newObj = [];
         }
         for (var key in obj) {
             var val = obj[key];
             newObj[key] = typeof val === 'object' ? cloneObj(val) : val;
         }
         return newObj;
     };
   
        //点击隐藏，使用on方法，保留原来的事件
        $("*").on("dbclick",function (event){
            if(event.currentTarget.id=="dragerDom"||event.currentTarget.parentNode.id=="dragerDom") return false;
            $(this).hide();
            return false;
        });
        $("*").on("mousedown",function (event){
            if(event.currentTarget.id=="dragerDom"||event.currentTarget.parentNode.id=="dragerDom") return false;
            target = event.currentTarget
            rawStyle = cloneObj(event.currentTarget.style)
          //  target.style.fixedheight = '70px !important';
           // target.style.fixedwidth = '100px !important';
            tarr = $(this)
            document.documentElement.style.overflow = 'auto'
            pname = tarr.parent().prev().prop('nodeName')

            position.x = event.clientX
            position.y = event.clientY
            position.left = event.currentTarget.offsetLeft
            position.top = event.currentTarget.offsetTop
            isDown = true
            isHide = false
            return false;
        });

        $("*").on("mousemove",function (event){
            if(event.currentTarget.id=="dragerDom"||event.currentTarget.parentNode.id=="dragerDom") return false;
            if (!isDown) return
            target.style.position = "absolute"
            target.style.zIndex = 100000001;
            let mx = event.clientX
            let my = event.clientY
            let myLeft = mx - position.x + position.left
            let myTop = my - position.y + position.top
            //console.log({ myLeft, myTop })
            target.style.left = myLeft + "px"
            target.style.top = myTop + "px"
            if (event.clientX == 0 && !isHide){
                tarr.hide();
                showMessage('已删除Dom: '+pname+'-> '+tarr.prev().prop('nodeName'), 0);
                isHide=true;
                isDown = false
            }
            if (event.clientY < 10 && !isHide){
                target.style = rawStyle
                showMessage('已还原Dom: '+pname+'-> '+tarr.prev().prop('nodeName'), 0);
                isDown = false
            }
        });

        $("*").on("mouseup",function (event){
            if(event.currentTarget.id=="dragerDom"||event.currentTarget.parentNode.id=="dragerDom") return false;
            if (isDown) isDown = false
        });
        //单独操作iframe里的广告
        $("iframe").each(function(){
          //console.log($(this).attr("id"));
          $(window.frames[$(this).attr("id")].document).find("*").on("click",function (event){
                if(event.currentTarget.id=="dragerDom"||event.currentTarget.parentNode.id=="dragerDom") return false;
                $(this).hide();
                return false;
          });
        })
      }else{//删除结束
            deleteMode = 0;
            $("*").removeClass("chosenBorder");
            //去掉点击事件
            $("*").off("dbclick");

            $("*").off("mousedown");

            $("*").off("mousemove");

            $("*").off("mouseup");
            $(window.frames[$(this).attr("id")].document).find("*").off("click");
      }
    }
})();