Drag and Drop
From FHTML
Contents |
1 What's the same as html?
1.1 Basic Example
- Drag and Drop in FluidHtml is still in development. We'll be implementing and extending what's possible in html5.
- Note that while the Html5 spec offers many confusing drag and drop options, it doesn't offer a simple
ondragevent. FluidHtml does. It allows you to track movement only while dragging, and without having to set up variables to determine whether you're dragging or not. - The following example works. Drag the small box to resize.
<style type="text/fhtml" >
#container {
width:auto;
height:auto;
}
#dragger {
draggable:true;
onDragStart:onDragStart(event); /*Fires when dragging starts*/
onDrag:onDrag(event); /*Fires throughout drag*/
onDragEnd:onDragEnd(event); /*Fires when dragging ends*/
}
</style>
<script type="text/fhtml" fhtmlignore="false" >
function onDragStart(event) {
trace("onDragStart");
}
function onDrag(event) {
//do something with current position here.
}
function onDragEnd(event) {
trace("onDragEnd");
}
</script>
<div id="container" >
<div id="dragger" />
</div>
#container {
width:auto;
height:auto;
}
#dragger {
draggable:true;
onDragStart:onDragStart(event); /*Fires when dragging starts*/
onDrag:onDrag(event); /*Fires throughout drag*/
onDragEnd:onDragEnd(event); /*Fires when dragging ends*/
}
</style>
<script type="text/fhtml" fhtmlignore="false" >
function onDragStart(event) {
trace("onDragStart");
}
function onDrag(event) {
//do something with current position here.
}
function onDragEnd(event) {
trace("onDragEnd");
}
</script>
<div id="container" >
<div id="dragger" />
</div>
1.2 draggable
- Step 1. in setting up drag and drop is setting
draggable = true;
1.3 onDragStart
- The
onDragStartevent fires when you start dragging the element.
1.4 onDragEnd
- The
onDragEndevent fires when you finish dragging the element. It's not the same asdrop! The difference is thatonDragEndfires on the element that was dragged. Anddropfires on the element that is dropped on.