Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 89 lines (76 sloc) 1.748 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
<style>
#test {
position: relative;
}
.box {
width: 50px;
height: 50px;
background-color: #900;
border: 2px solid #fff;
padding: 5px;
margin: 7px;
color:#fff;
}
.fixed{
border: 1px solid red;
height: 220px;
position: fixed;
left: 500px;
width: 260px;
}
.container {
width: 150px;
height: 150px;
border: 4px solid black;
background: #ccc;
padding: 6px;
margin: 9px;
}
.container.fixed{
left: 800px;
}
</style>

<div id="togglers"><a id="enable">enable drag</a> | <a id="disable">disable drag</a></div>
<h3 class="h3_test">Drag and Drop to a container</h3>
<p>You should be able to drag red the box around and drop it into one of the containers. The fixed containers should still accept drops when page is scrolled down.</p>
<div id="test">

<div id="a" class="container">
<p></p>
</div>

<div id="b" class="container fixed">
<p></p>
</div>

<div class="fixed">
<div id="c" class="container">
<p></p>
</div>
</div>

<div id="box" class="box">
<p></p>
</div>
</div>


<script src="/depender/build?require=More/Drag.Move"></script>
<script>

var dragger = $('box').makeDraggable({
droppables: '.container',
onDrop: function(element, droppable){
if (droppable) droppable.getElement('p').set('text','onDrop');
element.getElement('p').set('text', 'onDrop');
},
onEnter: function(element, droppable){
droppable.getElement('p').set('text','onEnter');
},
onLeave: function(element, droppable){
droppable.getElement('p').set('text','onLeave');
},
onStart: function(element){
$('test').getElements('p').set('text','');
}
});

$('enable').addEvent('click', function(){
dragger.attach();
});
$('disable').addEvent('click', function(){
dragger.detach();
});

</script>


Something went wrong with that request. Please try again.