Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Drop</title>
    <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style>
​
    #left {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 220px;
      z-index: 1;
      background-color: gray;
      padding: 10px;
    }
​
    .dropOnMe {
      width: 500px;
      height: 200px;
      display: inline-block;
      background-color: yellow;
    }
​
    .dragMe {
      height: 20px;
      width: 200px;
      margin-bottom: 5px;
      border: 1px solid red;
      font-size: 13px;
      background-color: white;
      text-align: center;
      cursor: move;
      font-family: tahoma;
    }
​
    .ui-droppable-hover {
      outline: 3px solid red;
    }
​
    </style>
​
  </head>
​
  <body>
​
    <div id="left">
      <div class="dragMe">Drop me on Yellow</div>
      <div class="dragMe">Drop me on Yellow</div>
      <div class="dragMe">Drop me on Yellow</div>
      <div class="dragMe">Drop me on Yellow</div>
    </div>
​
    <div id="right">
      <div class="dropOnMe"></div>
      <div class="dropOnMe"></div>
      <div class="dropOnMe"></div>
      <div class="dropOnMe"></div>
      <div class="dropOnMe"></div>
      <div class="dropOnMe"></div>
    </div>
    
    <!-- SCRIPTS -->
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
    <script>
​
    $(function() {
​
      $('#left .dragMe').draggable(
        {
          helper: 'clone',
          opacity: 0.5,
          appendTo: 'body',
          zIndex: 11
        }
      );
​
      $('#right .dropOnMe').droppable(
        {
            drop: function( event, ui ) {
              console.log(event);
            }
          }
        );
​
      });
​
    </script>
​
  </body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers