JavaScript图片拖放 js怎么让图片移动起来

转载

编程艺术之光 2023-12-21 10:44:59

文章标签 JavaScript图片拖放 javascript html 事件处理点击事件 文章分类 JavaScript 前端开发

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -250px;
      margin-top: -225px;
    }
  </style>
</head>

<body>
  <img src="./images/login.png" alt="" draggable="false" />
  <script>
    /* 

    目标： 鼠标拖动图片
    思路：
    1. 当没有按下鼠标的时候， 鼠标移动 图片不动
    2. 当我们的图片上按下鼠标的时候， 然后移动鼠标 然后图片跟着动
    3. 鼠标抬起的时候(松开左键， 图片就停在对应的位置 在移动鼠标 图不动)

    步骤：
    1. 给img加一个属性： draggable = 'false'
    决定元素是否能够响应 H5新属性
    2. 找对象 获取元素
    3. 注册事件
    鼠标按下事件
    4. 设置一个标记为true能动

    5. 鼠标移动的
    5.1 判断图片是否处于能动的状态
    5.2 能动 根据鼠标位置算出img应该出现的位置


    6. 鼠标抬起松开的时候
    设置标记 为false不能动

 */



    // 获取元素
    var img = document.querySelector('img');

    // 声明一个变量 作为标记 是否移动

    var canMove = false;
    var tempX, tempY;

    // 注册事件
    // 给图片注册鼠标按下事件mosedown
    img.onmousedown = function (e) {
      canMove = true;
      console.log(e.offsetX, e.offsetY);
      // 记录点下的时候鼠标在图片上的位置
      tempX = e.offsetX;
      tempY = e.offsetY;
    }
    // 鼠标移动事件 mousemove
    img.onmousemove = function (e) {
      // 判断能够移动
      if (canMove) {
        // 因为 margin会移动元素 我们不希望margin影响图片的位置 把margin去掉
        // img.style.marginTop = 0;
        // img.style.marginLeft = 0;

        var x = e.pageX - tempX + 250;
        var y = e.pageY - tempY + 225;

        img.style.left = x + 'px';
        img.style.top = y + 'px';
      }
    }
    // 鼠标抬起事件 mouseup
    img.onmouseup = function () {
      canMove = false;
    }
  </script>
</body>

</html>

2.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>注册事件</title>
</head>

<body>
  <input type="button" value="按钮" id="btn" />
</body>
<script>
  /*    
   js中的注册事件
   on
   事件源.on 事件类型=事件处理程序

   on的事件注册有个缺点：一个元素同类型的事情 只能注册一次

   addEventListener
      作用：注册事件
      用法：
      element.addEventListener(event,fun)
          element 注册事件的对象
          event  事件类型
          fun     事件处理程序

      优点：可以重复注册支持新的事件

      缺点：ie8以及以下不支持

      attachEvent()  ie5 开始到ie10 都可以用
      element.addEventListener(on+事件类型，事件处理程序)

 */
  var btn = document.getElementById('btn');
  // 点击事件的值会被后面的覆盖
  btn.onclick = function () {
    console.log(1);
  }
  btn.onclick = function () {
    console.log(2);
  }

  // 演示 addEventListener
  btn.addEventListener('click', function () {
    console.log(1);
  });
  btn.addEventListener('click', function () {
    console.log(3);
  });


  //演示atttacheEvent()
  btn.addEventListener("click", function () {
    console.log(1);
  });
  btn.addEventListener("click", function () {
    console.log(2);
  });

  // 演示 attachEvent()//谷歌会报错，ie专用
  // btn.attachEvent("onclick", function () {
  //   console.log(3);
  // });

  // 将来如果自己需要实现多个浏览器 注册事件的兼容性问题
  // 判断当前的浏览器是否支持我想要的使用的注册事件方法
  console.log(btn.addEventListener);
  console.log(btn.attachEvent);
  if (btn.addEventListener !== undefined) {
    btn.addEventListener('click', function () {
      console.log('我是谷歌浏览器专用代码');
    });
  } else if (btn.attachEvent !== undefined) {
    btn.attachEvent('onclick', function () {
      console.log('我是ie专用代码');

    });
  } else {
    btn.onclick = function () {
      console.log('请更换你的浏览器');
    }
  }
</script>

</html>

3.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .yeye {
      width: 400px;
      height: 400px;
      background-color: lawngreen;
    }

    .baba {
      width: 300px;
      height: 300px;
      background-color: tomato;
    }

    .erzi {
      width: 200px;
      height: 200px;
      background-color: cyan;
    }

    .sunzi {
      width: 100px;
      height: 100px;
      background-color: gold;
      margin-left: 600px;
    }
  </style>
</head>

<body>
  <div class="yeye">
    <div class="baba">
      <div class="erzi">
        <div class="sunzi"></div>
      </div>
    </div>
  </div>
</body>
<script>
  /*     
    事件注册：====事件监听==============

    事件绑定

      element.addEventListener (event,function,useCapture)
      useCapture 决定函数在哪个阶段执行

      捕获：从根元素(document)开始，一层一层找到真正的触发事件的元素目标
      找到真正触发事件的的元素

      冒泡：从事件源，一层一层向外传播的过程

      一旦事件传播到这个元素的身上，如果有注册对应的事件，就会调用对应的事件处理程序

       */


  //  获取元素
  var yeye = document.querySelector('.yeye');
  var baba = document.querySelector('.baba');
  var erzi = document.querySelector('.erzi');
  var sunzi = document.querySelector('.sunzi');

  
  // 演示事件的捕获（从大到小）
  // 点爸爸的时候是点不到儿子的

//   yeye.addEventListener(
//     'click',
//     function () {
//       console.log('我是爷爷');
//     },
//     true
//   );

//  baba.addEventListener(
//     'click',
//     function () {
//       console.log('我是爸爸');
//     },
//     true
//   );

//   erzi.addEventListener(
//     'click',
//     function () {
//       console.log('我是儿子');
//     },
//     true
//   );

//  sunzi.addEventListener(
//     'click',
//     function () {
//       console.log('我是孙子');
//     },
//     true
//   );


// 演示一下冒泡（从小到大）
// 点爸爸的时候是点不到儿子的

yeye.addEventListener(
'click',
function(){
console.log('我是你爷爷');
},
false

);
baba.addEventListener(
'click',
function(){
console.log('我是你爸爸');
},
false

);
erzi.addEventListener(
'click',
function(){
console.log('我是你儿子');
},
false

);
sunzi.addEventListener(
'click',
function(){
console.log('我是你孙子');
},
false

);


</script>

</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .baba {
        width: 100%;
        height: 200px;
        background-color: tomato;
        position: relative;
        font-size: 100px;
      }
      .erzi {
        width: 40px;
        height: 40px;
        background-color: lawngreen;
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div class="baba">
      这是一个超大的广告图
      <div class="erzi">X</div>
    </div>
  </body>

  <script>
    /* 
        有两个元素 是父子关系 
        父元素有点击事件  子元素也有点击事件
        如果点击是子元素的点击事件,由于事件冒泡.也会触发父元素里面的事件处理程序
      
       需要不让父元素里面的点击事件触发 ---阻止事件冒泡

       阻止事件冒泡:
        事件对象.stopPropagation()
      
       */
    var baba = document.querySelector('.baba')
    console.log(baba);
    var erzi = document.querySelector('.erzi')
    console.log(erzi);

    baba.addEventListener('click',function(e){
      console.log(e);
      console.log(123);
      // 跳转到4399
      location.href = 'http://www.4699.com';

    });
    erzi.addEventListener('click',function(e){
      console.log(e);
      baba.parentNode.removeChild(baba);
      // 事件对象.stopPropagation();
      // 希望事件传播到哪，就在哪里写阻止事件冒泡
      e.stopPropagation();
    });
    
  </script>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style: none;
      min-height: 200px;
      background-color: lawngreen;
    }

    li {
      float: left;
      width: 200px;
      height: 60px;
      border-radius: 5px;
      background-color: tomato;
      color: #fff;
      margin-left: 10px;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <input type="button" value="生成一个新的li" id="btn" />
  <ul></ul>
</body>
<script>
  /*   目标:学会事件委托
         作用: 解决动态生成的元素 事件处理问题
         原理:
         1.点击li的时候 事件会冒泡到ul上面
         2.给ul注册事件
         3.如果ul的事件处理程序被调用了 
         4.判断触发事件的真正元素是不是li 是li 就去执行删除li的代码


    */
  // 动态生成li
  var ul = document.querySelector("ul");
  var btn = document.getElementById("btn");
  var count = 0;
  btn.onclick = function () {
    count++;
    var li = document.createElement("li");
    li.innerText = "我是新来的,我要做大哥" + count;
    ul.appendChild(li);
  };

  // 事件委托
  // 1.先给已存在于页面中的一个前辈元素注册事件

  // ++++++++++++++++++++++++++++++++总结：父元素捕获子元素用委托方式
  // ++++++++++++++++++++++++++++++++总结：子元素控制父元素用冒泡

  // li.addEventListener('click',function(e){
  //   ul.removeChild(e.target);
  //   e.stopPropagation();
  // });


  ul.addEventListener('click', function (e) {
    console.log(e);
    console.dir(e.target);
    if (e.target.nodeName === 'LI') {
      ul.removeChild(e.target);
    }


  });
</script>

</html>

6.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大家来吐槽</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
      }

      .main {
        width: 800px;
        margin: 0 auto;
      }

      textarea {
        resize: none;
      }

      .opt {
        padding: 10px;
      }

      .opt input:nth-child(1) {
        width: 200px;
        height: 40px;
        border-radius: 4px;
        border: 1px solid #ffa200;
        outline: none;
        padding: 4px;
      }

      .opt textarea {
        border-radius: 4px;
        outline: none;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
        padding: 10px;
        height: 100px;
        border-color: #ffa200;
      }

      .opt input:nth-child(3) {
        width: 100px;
        height: 40px;
        border-radius: 4px;
        border: 0 none;
        outline: none;
        padding: 4px;
        background-color: #ffa200;
        color: #fff;
      }

      .coments {
        padding: 10px;
      }

      li {
        border: 1px dashed #ccc;
        padding: 10px;
        margin-bottom: 10px;
      }

      .comment-content {
        margin: 10px 0;
        text-indent: 2em;
        border-bottom: 1px dashed #ccc;
        line-height: 24px;
      }

      .date {
        text-align: right;
        padding-right: 10px;
      }

      .delete {
        text-align: right;
        line-height: 30px;
        padding-right: 10px;
      }

      .del {
        cursor: pointer;
        color: #ccc;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <div class="opt">
        <div class="ta">
          <input
            type="text"
            id="username"
            placeholder="怎么称呼您"
            autocomplete="false"
          />
          <textarea class="coment" placeholder="尽情地吐槽吧"></textarea>
          <input type="button" value="发表" />
        </div>
        <div class="button"></div>
      </div>
      <div class="coments">
        <ul>
          <!-- <li>
          <div class="user">李狗蛋</div>
          <div class="comment-content">今天的天气真好呀</div>
          <div class="date">2020-01-01 08:10:10</div>
          <div class="delete"><span class="del">删除</span></div>
        </li> -->
        </ul>
      </div>
    </div>
    <script>
      /* 
       处理数据 时间 从近到远排序
         */

      // 动态生成评论
      // 1.1生成一个数组
      var comments = [
        {
          user: "王德发",
          content: "那一年我背井离乡,从此村里的人再也没喝过一口水",
          time: "2021-04-09 15:15:18",
        },
        {
          user: "小甜甜",
          content: "我班里的女神穷追猛打,最后终于把她打进了医院",
          time: "2021-03-08 12:48:52",
        },
      ];
      //排序
      comments.sort(function (a, b) {
        var aDate = new Date(a.time);
        var bDate = new Date(b.time);
        return bDate - aDate;
      });
      // 1.2 遍历生成li
      var str = "";
      comments.forEach(function (e) {
        str +=
          "<li>" +
          '<div class="user">' +
          e.user +
          "</div>" +
          '<div class="comment-content">' +
          e.content +
          "</div>" +
          '<div class="date">' +
          e.time +
          "</div>" +
          '<div class="delete"><span class="del">删除</span></div>' +
          "</li>";
      });
      //获取ul
      var ul = document.querySelector(".coments ul");
      ul.innerHTML = str;

      // 2.1 获取相关的元素
      //获取按钮
      //   var btn = document.querySelector(".ta input:nth-child(3)");
      //获取按钮
      var btn = document.querySelector(".ta input[type=button]");
      //获取用户名
      var username = document.getElementById("username");
      //获取评论区内容
      var coment = document.querySelector(".coment");
      //    console.log(coment);
      //注册事件
      btn.onclick = function () {
        //获取用户名框的内容
        var user = username.value;
        //表单验证 要求限制让用户遵守规则 去掉两端空格
        if (user.trim().length === 0) {
          alert("用户名不能为空");
          return;
        }
        //获取评论的内容
        var content = coment.value;
        if (content.trim().length === 0) {
          alert("评论内容不能为空");
          return;
        }
        // 获取当前的时间
        var date = new Date();
        date.setHours(date.getHours() + 8);
        var time = date.toJSON();
        time = time.replace("T", " ").substring(0, time.indexOf("."));

        // 生成li  由于评论不能覆盖 不能使用innerHTML document.createElement
        var li = document.createElement("li");
        li.innerHTML =
          '<div class="user">' +
          user +
          "</div>" +
          '<div class="comment-content">' +
          content +
          "</div>" +
          '<div class="date">' +
          time +
          "</div>" +
          '<div class="delete"><span class="del">删除</span></div>';

        //把这个li放到ul里 追加
        // var first = document.querySelector(".coments ul li:nth-child(1)");
        // console.log(first);
        ul.insertBefore(li, ul.children[0]);
        //清空内容
        username.value = "";
        coment.value = "";

        //使用事件委托进行删除
        ul.addEventListener("click", function (e) {
          //判断的方式有很多 可以判断是不是span标签 也可以来判断类名是不是del
          // contains()
          console.dir(e.target);
          console.log(e.target.classList);
          if (e.target.classList.contains("del")) {
            // 证明点击元素是满足条件的
            // 删除li
            if (confirm("你确定要删除吗?")) {
              var zf = e.target.parentNode.parentNode;
              var zzf = zf.parentNode;
              zzf.removeChild(zf);
            }
          }
        });
      };
    </script>
  </body>
</html>

7.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <input type="button" value="抽奖" id="btn" />
</body>
<script>
  /*   
   事件解绑：
   原来注册了事件 希望不再触发
   解绑和注册时相反的过程
      on 事件源.on事件类型=事件处理程序
          解绑的时候
          事件源.on事件类型= null;
          addEventListener('事件类型'，事件处理程序)
          事件源.removeEventListener('类型',函数名)

          attachEvent
          事件源.detachEvent('on + 事件类型',函数名)

       */


  // 抽奖--方法一
  // var btn = document.getElementById('btn')
  // btn.onclick = function () {
  //   alert('谢谢惠顾');
  //   btn.onclick = null;
  // };

  // 抽奖方法二
  btn.addEventListener('click', function fn() {
    alert('谢谢惠顾');
    btn.removeEventListener('click', fn);
  });
</script>

</html>

8.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="ipt" />
    <textarea id="txt"></textarea>
    <div>
      却说那八戒跟着丈母，行入里面，一层层也不知多少房舍，磕磕撞撞，尽都是门槛绊脚。呆子道：“娘，慢些儿走。我这里边路生，你带我带儿。”那妇人道：“这都是仓房、库房、碾房各房，还不曾到那厨房边哩。”八戒道：“好大人家！”磕磕撞撞，转湾抹角，又走了半会，才是内堂房屋。那妇人道：“女婿，你师兄说今朝是天恩上吉日，就教你招进来了；却只是仓卒间，不曾请得个阴阳，拜堂撒帐，你可朝上拜八拜儿罢。”八戒道：“娘，娘说得是。你请上坐，等我也拜几拜，就当拜堂，就当谢亲，两当一儿，却不省事？”他丈母笑道：“也罢，也罢，果然是个省事干家的女婿。我坐着，你拜么。”
    </div>
  </body>
  <script>
    /* 
      srcElement和target一样的,是事件源 但是是在ie8里面的使用的
        阻止浏览器默认行为  表单  超链接 鼠标右键
         e.preventDefault
      
       */
    var ipt = document.getElementById("ipt");
    //聚焦focus 当鼠标光标进入的触发
    ipt.onfocus = function (e) {
        console.log("我被选中了");
      // console.log(e);
    };
    // 失焦 当鼠标离开的时候 触发 blur
    ipt.onblur = function (e) {
      console.log('鼠标离开了');
        console.log(e);
    };
    ipt.onclick = function (e) {
      console.log('我被点击了');
      console.log(e);
    };
    // 键盘事件 按下 keydown 抬起  keyup
    // ipt.onkeydown = function () {
    //   console.log(123);
    // };

    // 给document注册键盘事件
    document.onkeydown = function (e) {
      if (e.keyCode == 67 && e.ctrlKey) {
        console.log('点击了ctrl+c');
        e.preventDefault();
      }
    };
  </script>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。