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>
            <title>Bootstrap Example</title>
            <meta charset="utf-8"> 
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
        
    
        </head>
        <body>
            <div class="container">
                <div class="row">
                    <div class="col-md-10 col-md-offset-2">
                        <div class="draggable"></div>
                        <div class="draggable"></div>
                        <div class="draggable"></div>
                        <div id="droppable"></div>
                    </div>
                </div>
            </div> 
        </body>
    </html>
 
    div {
            margin: 5px;
        }
    .draggable {
            width:100px;
            height: 100px;
            background-color: blue;
    }
    #droppable {
             width: 400px;
             height: 400px;
             background-color: red;
    }
 
    $(document).ready(function(){
        var isFreeToDrop = true;
      
        $(".draggable").draggable({
            drag: function(event,ui){
                     $(this).css("opacity", .5)
            }
        });
      
            $(".draggable").droppable({
              tolerance: 'touch',
            over: function(event,ui){
              isFreeToDrop = false;
            },
            out: function(event,ui){
              isFreeToDrop = true;
            },
              
        });
      
        $('#droppable').droppable({
            accept: ".draggable",
            tolerance:  'pointer',
            drop: function(event,ui){
              if( isFreeToDrop ){
                   alert("dropped");
              }
​
            }
        });
    });
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers