Posts Tagged css 3

html 5 支援drag and drop  

Posted by Chowky in Jquery, Mootools, News on July 3, 2009

下一個web　standard，如無意外，應該會是html５＋css３。

This example only works in Firefox 3.5 and Safari 4 but here’s a quick tour of how it works.

IE始終都未support。這對於web developer 來說，是一個nightmare，一方面要支援ie，又要支援firefox，safari。

但是，要利用新的html５的function就要放棄ie的support。

chowky對這方面還是樂觀的。later可能會好一點（仍然抱有信念）。

（說完未？）
ok…back　to　topic

原來要make　drag　and　drop　都不太困難。
會否，因為html５會令html　更普及？

1
2
3
4
5

 
<li draggable="true" id="file1" ondragstart="drag(this, event)"><span>filename.txt</span></li> 
To create a draggable area you can do this.
 
<div id="trash" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false"></div>

之後再加少少javascript　code

1
2
3
4
5
6
7
8
9

 
function drag(target, e) {
    e.dataTransfer.setData('Text', target.id);
}
function drop(target, e) {
    var id = e.dataTransfer.getData('Text');
    target.appendChild(document.getElementById(id));
    e.preventDefault();
}

Source: http://shapeshed.com/journal/drag_and_drop_in_html5/

  • Share/Bookmark

, ,

No Comments