fork download
copy 
  1. <!DOCTYPE html>
  2. <html lang="th">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Transfer List</title>
  7.     <style>
  8.         body {
  9.             font-family: Arial, sans-serif;
  10.             margin: 20px;
  11.             padding: 20px;
  12.         }
  13.         .container {
  14.             display: flex;
  15.             justify-content: space-between;
  16.             width: 500px;
  17.             margin: auto;
  18.         }
  19.         .list {
  20.             width: 45%;
  21.             border: 1px solid #ddd;
  22.             padding: 10px;
  23.             min-height: 200px;
  24.         }
  25.         .item {
  26.             padding: 5px;
  27.             margin: 5px 0;
  28.             background-color: #f4f4f4;
  29.             cursor: pointer;
  30.             text-align: center;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <h2>Transfer List</h2>
  36.     <div class="container">
  37.         <div class="list" id="leftList">
  38.             <div class="item" onclick="moveItem(this)">cat</div>
  39.             <div class="item" onclick="moveItem(this)">dog</div>
  40.             <div class="item" onclick="moveItem(this)">bird</div>
  41.             <div class="item" onclick="moveItem(this)">fish</div>
  42.             <div class="item" onclick="moveItem(this)">lion</div>
  43.             <div class="item" onclick="moveItem(this)">tiger</div>
  44.         </div>
  45.         <div class="list" id="rightList"></div>
  46.     </div>
  47.     <script>
  48.         function moveItem(element) {
  49.             document.getElementById('rightList').appendChild(element);
  50.             element.onclick = null;
  51.         }
  52.     </script>
  53. </body>
  54. </html>
  55.  
Success #stdin #stdout 0.03s 25444KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transfer List</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 20px;
        }
        .container {
            display: flex;
            justify-content: space-between;
            width: 500px;
            margin: auto;
        }
        .list {
            width: 45%;
            border: 1px solid #ddd;
            padding: 10px;
            min-height: 200px;
        }
        .item {
            padding: 5px;
            margin: 5px 0;
            background-color: #f4f4f4;
            cursor: pointer;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>Transfer List</h2>
    <div class="container">
        <div class="list" id="leftList">
            <div class="item" onclick="moveItem(this)">cat</div>
            <div class="item" onclick="moveItem(this)">dog</div>
            <div class="item" onclick="moveItem(this)">bird</div>
            <div class="item" onclick="moveItem(this)">fish</div>
            <div class="item" onclick="moveItem(this)">lion</div>
            <div class="item" onclick="moveItem(this)">tiger</div>
        </div>
        <div class="list" id="rightList"></div>
    </div>
    <script>
        function moveItem(element) {
            document.getElementById('rightList').appendChild(element);
            element.onclick = null;
        }
    </script>
</body>
</html>
https://ideone.com/87ehHJ
language:
PHP (php 7.3.5)
created:
6 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!