Drag n Drop possible?

[iugo]

Is it possible to do a drag and drop using this JS? If it is possible, is there an example I can follow?

 

Thanks in advance..

 

disclaimer: a newbie with JS.

[Carl]

Hi,

There is no drag-and-drop functionality baked into GSAP v12 for javascript.

 

For something like drag and drop, it would most likely be handled in a way similar to flash/actionscript. You would repeatedly run code that would set an object's x/y = to the cursor's x/y so that it appears the object is following the cursor. Note this behavior isn't something that you would normally use a tween for as tweens most commonly have fixed durations and ending values.

 

jQuery has some ways of handling drag and drop: http://jqueryui.com/demos/draggable/

[Randall]

And, if you for some reason don't want the jQuery ui version, or even a custom jQuery version where you do your own drag code, here's a minimalist example of drag-n-drop that you can start with. The only trick is to ensure your mouseup and mouseout events ARE handled somewhere in the scope for cases where the mouse leaves the target (AKA currently dragging) element. Think about it in terms of ActionScript, where when things are dragged quickly and off the stage, etc. certain mouse events may not fire that you intend once the dragging is supposed to stop. It pretty much works the same for the most part in JavaScript, though I like to use window events for mouseup most of the time so I can be certain a drag stop event handler fires off reliably

drag-n-drop.zip

<!-- you may need to change the path to your Greensock script files -->
<script src="uncompressed/easing/EasePack.js"></script>
<script src="uncompressed/plugins/CSSPlugin.js"></script>
<script src="uncompressed/TweenLite.js"></script>
<div id="containerDrag" style="position:absolute; width:50px; height:50px; left:0px; top:0px; background-color:#ccc; cursor:pointer;"></div>
<script>
var dragContainer = document.getElementById('containerDrag');
function startDrag(event){
event.preventDefault();
dragContainer.onmousedown = null;
window.onmousemove = doDrag;
window.onmouseup = stopDrag;
}
function stopDrag(event){
window.onmousemove = null;
window.onmouseup = null;
dragContainer.onmousedown = startDrag;
}
function doDrag(event){
var xOffset = event.pageX - 25;
var yOffset = event.pageY - 25;
TweenLite.to(dragContainer, 0.5, { css:{left:xOffset, top:yOffset}, overwrite:true } );
}
dragContainer.onmousedown = startDrag;
</script>