CODEWITHSUNDEEP
htmlipaddrag-and-droptouchdraggable
silviomoreto
silviomoreto

Reputation: 5887

Native HTML5 Drag and Drop in touch devices

I developed a HTML5 drag and drop based on tutorial from html5rocks

It work ok on desktops browsers, but does not work on touch devices (I am testing on iPad).

Someone know how can I handle the drag events on touch devices?

Upvotes: 4

Views: 1296

Answers (2)

Sagar
Sagar

Reputation: 41

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/OEBPS" xmlns:ibooks="http://apple.com/ibooks/html-extensions">
<head>
    <title>Demo 2: Drag and drop</title>
    <meta charset="utf-8"/>
    <style type="text/css">
    /* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
    #mainContainer{
        width:600px;
        margin:0 auto;
        margin-top:10px;
        border:1px solid #000;
        padding:2px;
    }

    #capitals{
        width:200px;
        float:left;
        border:1px solid #000;
        background-color:#E2EBED;
        padding:3px;
        height:400px;
    }
    #countries{
        width:300px;
        float:right;
            margin: 4px 61px 3px -8px;
        height:400px;
    }   
    #labels{
        width: 120px;
        float:right;
              margin: -403px 116px 3px -8px;
        height:400px;
        /*border: 1px solid red;*/
    }   
    .dragableBox,.dragableBoxRight{
        width:80px;
            height: 10px;
        border:1px solid #000;
        background-color:#FFF;      
        margin-bottom:5px;
        padding:10px;
        font-weight:bold;
        text-align:center;
    }
    .dragableBox,.labelBoxRight{
        width:80px;
            height: 10px;
        border:1px solid #000;
        background-color:#FFF;      
        margin-bottom:5px;
        padding:10px;
        font-weight:bold;
        text-align:center;
    }
    div.dragableBoxRight{
    height: 31px;
        width:110px;
        /*float:left;*/
        margin-right:5px;
        padding:5px;
        background-color:#D3D3D3;
        border: 1px dashed;
    }
    div.labelBoxRight{
               height: 31px;
        width:110px;
        /*float:left;*/
        margin-right:5px;
        padding:5px;
        background-color:#E2EBED;
    }
    .dropBox{
        width:190px;
        border:1px solid #000;
        background-color:#E2EBED;
        height:400px;
        margin-bottom:10px;
        padding:3px;
        overflow:auto;
    }       
    a{
        color:#F00;
    }

    .clear{
        clear:both;
    }
    img{
        border:0px;
    }   
    </style>    

</head>
<body>  

    <div id="mainContainer">

        <div id="capitals">

            <div id="dropContent">
                <div class="dragableBox" id="box1">Br<sup>&#x002B;</sup></div>
                <div class="dragableBox" id="box2">Br<sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box3">CN<sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box4">NO<sub>2</sub><sup>&#x002B;</sup></div>
                <div class="dragableBox" id="box5">NO<sub>2</sub><sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box6">NH<sub>2</sub><sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box7">RC=C<sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box8">MeCO<sup>&#x002B;</sup></div>
            </div>
        </div>
        <div id="countries">
            <div id="box106" class="dragableBoxRight"></div>
            <div id="box107" class="dragableBoxRight"></div>
            <div id="box101" class="dragableBoxRight"></div>
            <div id="box104" class="dragableBoxRight"></div>
            <div id="box105" class="dragableBoxRight"></div>
            <div id="box102" class="dragableBoxRight"></div>
            <div id="box103" class="dragableBoxRight"></div>
            <div id="box108" class="dragableBoxRight"></div>


        </div>
        <div id="labels">
            <div id="boxl106" class="labelBoxRight">nucleophiles</div>
            <div id="boxl107" class="labelBoxRight">Electrophiles</div>
            <div id="boxl101" class="labelBoxRight">nucleophiles</div>
            <div id="boxl104" class="labelBoxRight">Electrophiles</div>
            <div id="boxl105" class="labelBoxRight">nucleophiles</div>
            <div id="boxl102" class="labelBoxRight">Electrophiles</div>
            <div id="boxl103" class="labelBoxRight">nucleophiles</div>
            <div id="boxl104" class="labelBoxRight">nucleophiles</div>

        </div>
        <div class="clear"></div>
        <div class="konaBody"></div>
    </div>

<div id="debug"></div>
<input type="button" value="reset" name="reset" onclick="r1();"/>
      <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.js"></script>
     <script src="js/jquery-ui.js"></script>
     <script type="text/javascript" src="js/drag-drop-custom.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
   <!-- <link href="css/jquery-ui.css" rel="stylesheet"
        type="text/css" />-->

<script type="text/javascript">
     <![CDATA[

// Custom drop action for the country boxes
function dropItems(idOfDraggedItem,targetId,x,y)
{
    var targetObj = document.getElementById(targetId);  // Creating reference to target obj
    var subDivs = targetObj.getElementsByTagName('div');    // Number of subdivs
    if(subDivs.length>0 && targetId!='capitals')return; // Sub divs exists on target, i.e. element already dragged on it. => return from function without doing anything
    var sourceObj = document.getElementById(idOfDraggedItem);   // Creating reference to source, i.e. dragged object
    var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1;    // Find numeric id of target
    var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1; // Find numeric id of source

    if(numericIdTarget-numericIdSource==100){   // In the html above, there's a difference in 100 between the id of the country and it's capital(example:
                                                // Oslo have id "box1" and Norway have id "box101", i.e. 1 + 100.
        sourceObj.style.backgroundColor='#0F0'; // Set green background color for dragged object
    }else{
        sourceObj.style.backgroundColor=''; // Reset back to default white background color
    }
    if(targetId=='capitals'){
    // Target is the capital box - append the dragged item as child of first sub div, i.e. as child of <div id="dropContent">
        targetObj = targetObj.getElementsByTagName('div')[0];   

    }
    targetObj.appendChild(sourceObj);   // Append   
}

function r1()
{


}

var dragDropObj = new DHTMLgoodies_dragDrop();  // Creating drag and drop object

// Assigning drag events to the capitals
dragDropObj.addSource('box1',true); // Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true); // Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true); // Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box7',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box8',true); 

// Assigning drop events on the countries
dragDropObj.addTarget('box101','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box102','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box103','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box104','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box105','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box106','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box107','dropItems');
dragDropObj.addTarget('box108','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('capitals','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop

dragDropObj.init(); // Initizlizing drag and drop object
    ]]>
</script>
</body>
</html>

Upvotes: -1

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

Some HTML5 native events work in WebKit eg touchstart, touchmove, touchend, touchcancel but not all of them.

Generally, drag/drop and touch do not really play nicely together.

Better to look at the various touch frameworks and use the built-in gestures.

Upvotes: 0

Related Questions