JS重要特性参考-优快云博客

本文介绍如何使用contentEditable属性使页面元素可编辑，并详细解释了拖放操作的实现方式，包括设置拖动源、目标元素及取消默认行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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" οndragstart="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;"
     οndrοp="fnHandleDrop()"
     οndragοver="fnCancelDefault()"
     οndragenter="fnHandleDragEnter()">
[drop text here]
</DIV>
<p>