Jquery 拖放按钮 onclick

Question

我试图通过单击按钮而不是通过拖动将按钮移动到下一个 div 并且 drop.This 代码取自 w3schools website.My 问题是是否可以通过单击按钮而不是拖放

将按钮移动到下一个 div

      <!DOCTYPE HTML>
      <html>
      <head>
      <style>
      #div1, #div2 {
        float: left;
        width: 100px;
        height: 35px;
        margin: 10px;
        padding: 10px;
        border: 1px solid black;
      }
      </style>
      <script>
      function allowDrop(ev) {
        ev.preventDefault();
      }

      function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }

      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
      </script>
      </head>
      <body>

      <h2>Drag and Drop</h2>
      <p>Drag the image back and forth between the two div elements.</p>

      <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
      </div>

      <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

      </body>
      </html>

Answer 1

<!DOCTYPE HTML>
<html>

<head>
    <style>
        #div1,
        #div2 {
            float: left;
            width: 100px;
            height: 35px;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }
        function move(ev) {
            ev.preventDefault();
            var target = (ev.target.parentNode.id == 'div1') ? 'div2' : 'div1';
            document.getElementById(target).appendChild(ev.target);
        }
    </script>
</head>

<body>
    <h2>Drag and Drop</h2>
    <p>Drag the image back and forth between the two div elements.</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" onClick="move(event)" id="drag1" width="88" height="31">
    </div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>

</html>

Answer 2

是的，这是可能的。你可以检查这个：

<!DOCTYPE HTML>
      <html>
      <head>
      <style>
      #div1, #div2 {
        float: left;
        width: 100px;
        height: 35px;
        margin: 10px;
        padding: 10px;
        border: 1px solid black;
      }

      #button2 {
        display: none;
      }
      </style>
      <script>
      function moveButton(e) {
        let btn1 = document.getElementById('button1');
        let btn2 = document.getElementById('button2');
        let btn_id = e.target.id;
        if(btn_id == "button1"){
            e.target.style.display = 'none';
            btn2.style.display= 'block';
        } else {
            e.target.style.display = 'none';
            btn1.style.display= 'block';
        }
      }

      </script>
      </head>
      <body>

      <div id="div1">
        <button id="button1" onClick="moveButton(event)">Click Me</button>
      </div>

      <div id="div2"><button id="button2" onClick="moveButton(event)">Click Me</button></div>


      </body>
      </html>

Jquery 拖放按钮 onclick

Jquery drag and drop the button onclick

javascript

php

jquery

drag-and-drop

jquery-plugins