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>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div id="sidebar">
      <div class="draggable"><p>1 test</p></div>
      <div class="draggable"><p>2 test</p></div>
      <div class="draggable"><p>3 test</p></div>
    </div>
    <div id="field">
  
    </div>
    <div class="clear"></div>
  </div>
</body>
</html>
 
var positionStack = [];
var fieldView = $('#field');
var sidebarView = $('#sidebar');
​
$('.draggable').draggable({
  containment: ".container",
  zIndex: 100,
  cursorAt: {
    top: 20,
    left: 25
  },
  snap: '.sidebar',
  snapMode: 'inner'
});
​
$('#field').droppable({
  over: function(event, ui) {
    dragOverElement({event: event, ui:ui});
  }
});
​
 $('#sidebar').droppable({
   over: function(event, ui) {
     dragOverElement({event: event, ui:ui});
   }
 });
​
function dragOverElement(data){
  var me = this;
  var lastItem = positionStack[positionStack -1];
  if(lastItem !== data.event.target.id)
  {
    positionStack.push(data.event.target.id);
    var player = $(data.ui.draggable);
    var target = data.event.target.id;
    switch(target)
    {
      case ('field'):
        fieldView.append(player);
        player.css('position', 'absolute');
        break;
      case ('sidebar'):
        sidebarView.append(player);
        player.css('position', 'absolute');
        break;
    }
  }
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers