home > Drag n Drop with binding and dropzones

Now you can make items draggable and specify dropzones with a callback function unique to each registered event. You can bind draggable elements so they can only be dropped on a dropzone as well.

On mouseover the dropzone class name will be appened with '_active' and removed on mouseout.

Then the only custom code is in the call back functions.

NOTE: Every interactable element dropzones or draggables needs to have positioning coordinates. the drop zones also need a width and height. Use the onmousedown handler to call this function passing in the event like so:
onmousedown="dragPress(event, bBound);"

drop zone1!
Box 1 can only be dropped in dropzones!
Box 2 can only be dropped in dropzone 1!
drop zone2!
Box 3 can be dropped anywhere but dropzone1
Box 4 can be dropped anywhere
code below! super easy 
    <div id="dropzone1" class="dropzone" style="width: 200px; height: 200px; position: absolute; top: 450px; left: 0px;">
        drop zone1!
        <div id="box1" class="box" style="top: 0; left: 0; filter: alpha(opacity=100); opacity: 1; background-color: red;" onmousedown="dragPress(event, true);">Box 1 can only be dropped in dropzones!</div>
        <div id="box2" class="box" style="top: 0; left: 0; filter: alpha(opacity=100); opacity: 1; background-color: blue;" onmousedown="dragPress(event, true);">Box 2 can only be dropped in dropzone 1!</div>
    </div>
    
    <div id="dropzone2" class="dropzone2" style="width: 200px; height: 200px; position: absolute; top: 450px; left: 210px;">
        drop zone2!
        <div id="box3" class="box" style="top: 0; left: 0; filter: alpha(opacity=100); opacity: 1; background-color: pink;" onmousedown="dragPress(event);">Box 3 can be dropped anywhere but dropzone1</div>
        <div id="box4" class="box" style="top: 0; left: 0; filter: alpha(opacity=100); opacity: 1; background-color: orange;" onmousedown="dragPress(event);">Box 4 can be dropped anywhere</div>
    </div>
    
    <script>
        registerDropZone('dropzone1', 'checkDropZone1');
        registerDropZone('dropzone2', 'checkDropZone2');
    </script>
Then just write the dropzone handlers 'checkDropZone1' and 'checkDropZone2' thats it! I threw the alerts in.