Drag-Drop In javascript, Hit test in javascript, JavaScript Tutorial to create Drag-Drop Events

As i created some small game in flash using HIT TEST. I always thought about same event in java-script too. After some day i need it to implement one for my company client's website who deals in stock market and they want drag-drop feature to show user's best stock.



Here i going to share the work i did for my client using HITTEST and Drag-Drop in java-script.

<script type="text/javascript">

// Custom drop actions for <div id="dropBox">
    function dropItems(idOfDraggedItem, targetId, x, y) {

document.getElementById('ctl00_Site_fOREX1_dragged1').innerHTML = 
document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('ctl00_Site_fOREX1_HiddenField1').value = 
document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('ctl00_Site_fOREX1_HiddenField_id1').value = 
idOfDraggedItem
    }

   

    // Custom drop actions for <div id="dropBox1">

    function dropItems1(idOfDraggedItem, targetId, x, y) {

document.getElementById('ctl00_Site_fOREX1_dragged2').innerHTML = 
document.getElementById(idOfDraggedItem).innerHTML;

document.getElementById('ctl00_Site_fOREX1_HiddenField2').value = 
document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('ctl00_Site_fOREX1_HiddenField_id2').value = 
idOfDraggedItem

}

    // Custom drop actions for <div id="dropBox2">
function dropItems2(idOfDraggedItem, targetId, x, y) {
document.getElementById('ctl00_Site_fOREX1_Dragged3').innerHTML = 
document.getElementById(idOfDraggedItem).innerHTML;

document.getElementById('ctl00_Site_fOREX1_HiddenField3').value = 
document.getElementById(idOfDraggedItem).innerHTML;

document.getElementById('ctl00_Site_fOREX1_HiddenField_id3').value = 
idOfDraggedItem
    }

var dragDropObj = new DHTMLgoodies_dragDrop();

dragDropObj.addSource('Forex1', true);

dragDropObj.addSource('Forex2', true);

dragDropObj.addSource('Forex3', true);

dragDropObj.addSource('Forex4', true);

dragDropObj.addSource('Forex5', true);

dragDropObj.addSource('Forex6', true);

dragDropObj.addSource('Indeses1', true);

dragDropObj.addSource('Indeses2', true);

dragDropObj.addSource('Indeses3', true);

dragDropObj.addSource('Indeses4', true); 

dragDropObj.addSource('Indeses5', true);
dragDropObj.addSource('Indeses6', true);
dragDropObj.addSource('Bullion1', true);
dragDropObj.addSource('Bullion2', true);
dragDropObj.addSource('Bullion3', true);
dragDropObj.addSource('Bullion4', true);
dragDropObj.addSource('Bullion5', true);
dragDropObj.addSource('Bullion6', true);

//        Javascript Target box to which Drag box make Hittest

dragDropObj.addTarget('dropBox', 'dropItems'); 

dragDropObj.addTarget('dropBox1', 'dropItems1');

dragDropObj.addTarget('dropBox2', 'dropItems2');
 

dragDropObj.init();

</script>

How to Use javascript

To make div dragable you need to define the div of which you want to drag.
for this you need to mention.

dragDropObj.addSource(<DIV ID name here>, true);

To make div Target for HitTest you need to define the div of which you want to set as target.
use function.

dragDropObj.addTarget(<Div ID target to be hit>, 'dropItems'); 

Go to website and click view market Dashbord

Now u can see how javascript works.

Also include the Jquery library file

drag-drop-custom.js