拖放小部件

我想在WordPress中製作類似iGoogle的東西，我可以在其中拖放小部件。這怎麼可以用HTML 5來完成？拖放小部件

2010-09-16 MsManiya

-1

看看下面的鏈接：

http://ljouanneau.com/lab/html5/demodragdrop.html

下面是例子頁面代碼：

<html> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/> 
<title>HTML5 Drag and drop demonstration</title> 
<style type="text/css"> 
#boxA, #boxB, #boxC { 
    float:left; width:200px; height:200px; padding:10px; margin:10px; 
} 

#boxA { background-color: blue; } 
#boxB { background-color: green; } 
#boxC { background-color: yellow; } 

#drag, #drag2, #drag3 { 
    width:50px; height:50px; padding:5px; margin:5px; 
    -moz-user-select:none; 
} 
#drag { background-color: red;} 
#drag2 { background-color: orange;} 
#drag3 { background-color: purple; border:3px brown solid;} 

</style> 
<script type="text/javascript"> 
function dragStart(ev) { 
    ev.dataTransfer.effectAllowed='move'; 
    //ev.dataTransfer.dropEffect='move'; 
    ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); 
    ev.dataTransfer.setDragImage(ev.target,0,0); 
    return true; 
} 

function dragEnter(ev) { 
    var idelt = ev.dataTransfer.getData("Text"); 
    return true; 
} 

function dragOver(ev) { 
    var idelt = ev.dataTransfer.getData("Text"); 
    var id = ev.target.getAttribute('id'); 
    if((id =='boxB' || id =='boxA') && (idelt == 'drag' || idelt=='drag2')) 
     return false; 
    else if(id =='boxC' && idelt == 'drag3') 
     return false; 
    else 
     return true; 
} 

function dragEnd(ev) { 
    ev.dataTransfer.clearData("Text"); 
    return true 
} 

function dragDrop(ev) { 
    var idelt = ev.dataTransfer.getData("Text"); 
    ev.target.appendChild(document.getElementById(idelt)); 
    ev.stopPropagation(); 
    return false; // return false so the event will not be propagated to the browser 
} 

</script> 
</head> 
<body> 
    <h1>Drag and drop demo in a HTML document, using the HTML5 drag and drop API</h1> 
    <div> The red box and the orange box can be dragged and dropped between 
    the blue and the green boxes. 
    The purple box can be dragged and dropped only to the yellow box. 
    </div> 

    <div id="boxA" 
     ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)"> 

     <div id="drag" draggable="true" 
      ondragstart="return dragStart(event)" 
      ondragend="return dragEnd(event)">drag me</div> 

     <div id="drag2" draggable="true" 
      ondragstart="return dragStart(event)" 
      ondragend="return dragEnd(event)">drag me</div> 

     <div id="drag3" draggable="true" 
      ondragstart="return dragStart(event)" 
      ondragend="return dragEnd(event)">drag me</div> 

    </div> 

    <div id="boxB" 
     ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)"> 
    </div> 

    <div id="boxC" 
     ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)"> 
    </div> 
    <div style="clear:both">Example created by <a href="http://ljouanneau.com/blog/">Laurent Jouanneau</a>.</div> 
</body> 
</html>

來源

2010-09-16 17:04:36

嗨！拖放在我的鏈接中不起作用 – MsManiya 2010-09-17 09:53:00

您使用的是哪種瀏覽器？它支持HTML 5嗎？ – 2010-09-17 18:09:18

我在Chrome上試了一下，剛剛在firefox中測試過，它的工作:)謝謝 – MsManiya 2010-09-19 19:08:47

回答

相關問題