JS重要特性参考

1、contentEditable="true"

在元素设置该属性后即能进行内容编辑；

2、elementFromPoint(event.x,event.y);

取得当前光标所在的元素（element）

var element = document.elementFromPoint(event.x,event.y);
alert('在这个元素上放下:' + element.tagName);

3、拖拉操作，对于不可编辑的span,div等元素，需要取消三个事件方法的缺省动作，ondragover, ondragenter 和ondrop.

// This function is called when the user // initiates a drag-and-drop operation. function fnHandleDragStart() { var oData = window.event.dataTransfer; // Set the effectAllowed on the source object. oData.effectAllowed = "move"; } // This function is called by the target // object in the ondrop event. function fnHandleDrop() { var oTarg = window.event.srcElement; var oData = window.event.dataTransfer; // Cancel default action. fnCancelDefault(); // Set the content of the oTarget to the information stored // in the data transfer object in the desired format. oTarg.innerText += oData.getData("text"); } // This function sets the dropEffect when the user moves the // mouse over the target object. function fnHandleDragEnter() { var oData = window.event.dataTransfer; // Cancel default action. fnCancelDefault(); // Set the dropEffect for the target object. oData.dropEffect = "move"; } function fnCancelDefault() { // Cancel default action. var oEvent = window.event; oEvent.returnValue = false; }
<H1>Example of the effectAllowed and dropEffect Properties</H1> <P>The code in this example sets the <B>effectAllowed</B> property to <SPAN CLASS="literal">move</SPAN>. It sets the <B>dropEffect</B> property to display the move cursor. The default action must be canceled in all events that are handled—in this example, <B>ondragstart</B>, <B>ondragover</B>, <B>ondragenter</B>, and <B>ondrop</B>.</P> <B> [not this text] <SPAN ID="oSource" ondragstart="fnHandleDragStart()"> [select and drag this text] </SPAN> [not this text] </B> <P><BR><P> <DIV ID="oTarget" STYLE="background:beige; height:100; width:200; border:solid black 1px;" ondrop="fnHandleDrop()" ondragover="fnCancelDefault()" ondragenter="fnHandleDragEnter()"> [drop text here] </DIV> <p>