除了jquery中的 ajaxStart，ajaxStop，原生的JS如何实现捕获到ajax发送的请求。
[问题点数：40分，结帖人zhangxing555]
除了jquery中的 ajaxStart，ajaxStop，原生的JS如何实现捕获到ajax发送的请求。
[问题点数：40分，结帖人zhangxing555]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2013年12月 Web 开发大版内专家分月排行榜第三
2013年12月 Web 开发大版内专家分月排行榜第三
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2016年8月优秀小版主2016年7月优秀小版主优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。HTML 5 拖放
HTML 5 拖放
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释：在 Safari 5.1.2 中不支持拖放。
HTML5 拖放实例
下面的例子是一个简单的拖放实例：
&!DOCTYPE HTML&
&script type=&text/javascript&&
function allowDrop(ev)
ev.preventDefault();
function drag(ev)
ev.dataTransfer.setData(&Text&,ev.target.id);
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData(&Text&);
ev.target.appendChild(document.getElementById(data));
&div id=&div1& ondrop=&drop(event)&
ondragover=&allowDrop(event)&&&/div&
&img id=&drag1& src=&img_logo.gif& draggable=&true&
ondragstart=&drag(event)& width=&336& height=&69& /&
它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
&img draggable=&true& /&
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
ev.dataTransfer.setData(&Text&,ev.target.id);
在这个例子中，数据类型是 &Text&，值是可拖动元素的 id (&drag1&)。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData(&Text&);
ev.target.appendChild(document.getElementById(data));
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData(&Text&) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id (&drag1&)
把被拖元素追加到放置元素（目标元素）中
如何在两个 &div& 元素之间拖放图像。Cookies improve the way our website works, by using this website you are agreeing to our use of cookies. For more information see our privacy policy.
log in / join
You are here:
& ondragstart
event | dragstart event
Browser support:
Occurs on the source element when the user starts the drag operation.
Note: The ondragstart event is supported in Firefox from version 3.5. In the earlier versions, use the
event instead.
If some content is selected in a HTML document, the user has the ability to start dragging it.
To drag the selected content, press and hold down a mouse button (browsers support dragging with the left button by default) on the selection and start to move the mouse.
To drop the dragged data, release the mouse button over the target.
By default, the target of a drag operation can be an editable element (, , , ), an element in , a document in
or another application.
If you want to allow for other elements to be a drop target during a drag operation, cancel both the
The following events are fired on the source element:
The ondragstart event is fired when the user starts to drag the selection.
event is fired periodically during the drag operation.
event is fired when the user has finished the drag operation (released the mouse button or pressed ESC).
Note: If the source of a drag operation is an editable element (see above), the
event is fired after the drag operation has been finished. It seems to be a bug in Firefox.
The following events are fired on an arbitrary element during dragging:
event is fired when the user moves the mouse pointer into the element.
event is fired periodically while the mouse pointer is over the element.
event is fired when the user moves the mouse pointer out of the element.
The following events are fired on a possible target element:
event is fired when the dragged data is dropped on the element.
event needs to be canceled in Google Chrome and Safari to allow firing the
The ondragstart event is cancelable, if it is canceled, the drag operation does not start.
If you want to customize the drag-and-drop operation or you need access to the dragged data, use the
How to register:
In HTML: &ELEMENT ondragstart="handler"&3.5In JavaScript: object.ondragstart =3.5object. ("dragstart", handler, useCapture);93.5object. ("ondragstart", handler);You can find the related objects in the
section below.
object is accessible to all event handlers in all browsers.
The properties of the
object contain additional information about the current event.
To get further details about these properties and the possible event handler registration methods, please see the page for the
For a complete list of events, see the page for .
Basic information:
Actions that invoke the ondragstart event:
Starting to drag the selection.
Invoking the
method on the source element.
The order of events related to the ondragstart event:
Event order
Any action that invokes the ondragstart event.
ondragstart
Example HTML code 1:
This example illustrates the use of the ondragstart event:
style"background-color:#f0d0a0; width:200px" ondragstart"return false"
The drag operation is not allowed for this field.
Try to select and drag some text from it.
style"background-color:#d0f0a0; width:200px"
The drag operation is allowed for this field.
Try to select and drag some text from it.
A possible drop target:
rows"5"You can drop the dragged data here.
Did you find this example helpful?
Example HTML code 2:
This example is the same as the previous, but it works in older Firefox also. Note: to cancel the
event, use the
method instead of the
type"text/javascript"
function Init () {
var forbidSource = document.getElementById ("forbidDrag");
if (forbidSource.addEventListener) {
forbidSource.addEventListener ("draggesture", OnDragStart, false);
// Firefox
function OnDragStart (event) {
event.stopPropagation ();
// cancels the draggesture event (preventDefault) !!!
onload"Init ()"
style"background-color:#f0d0a0; width:200px" id"forbidDrag" ondragstart"return false"
The drag operation is not allowed for this field.
Try to select and drag some text from it.
style"background-color:#d0f0a0; width:200px"
The drag operation is allowed for this field.
Try to select and drag some text from it.
A possible drop target:
rows"5"You can drop the dragged data here.
Did you find this example helpful?
Example HTML code 3:
This example dumps the order of events in case of dragging:
type"text/javascript"
function Init () {
var source = document.getElementById ("source");
var target = document.getElementById ("target");
if (source.addEventListener) {
// all browsers except IE before version 9
// Firefox from version 3.5, Google Chrome, Safari, Internet Exlorer
source.addEventListener ("dragstart", DumpInfo, false);
// Firefox before version 3.5
source.addEventListener ("draggesture", DumpInfo, false);
// Firefox, Google Chrome, Safari, Internet Exlorer
source.addEventListener ("drag", DumpInfo, false);
// Firefox, Google Chrome, Safari, Internet Exlorer
source.addEventListener ("dragend", DumpInfo, false);
// Firefox, Google Chrome, Safari, Internet Exlorer
target.addEventListener ("dragenter", DumpInfo, false);
// Firefox, Google Chrome, Safari, Internet Exlorer
target.addEventListener ("dragover", DumpInfo, false);
// Firefox from version 3.5, Google Chrome, Safari, Internet Exlorer
target.addEventListener ("dragleave", DumpInfo, false);
// Firefox
target.addEventListener ("dragexit", DumpInfo, false);
// Firefox from version 3.5, Google Chrome, Safari, Internet Exlorer
target.addEventListener ("drop", DumpInfo, false);
// Firefox before version 3.5
target.addEventListener ("dragdrop", DumpInfo, false);
if (source.attachEvent) {
// IE before version 9
source.attachEvent ("ondragstart", DumpInfo);
source.attachEvent ("ondrag", DumpInfo);
source.attachEvent ("ondragend", DumpInfo);
target.attachEvent ("ondragenter", DumpInfo);
target.attachEvent ("ondragover", DumpInfo);
target.attachEvent ("ondragleave", DumpInfo);
target.attachEvent ("ondrop", DumpInfo);
function DumpInfo (event) {
var firedOn = event.target ? event.target : event.srcElement;
if (firedOn.tagName === undefined) {
firedOn = firedOn.parentNode;
var info = document.getElementById ("info");
if (firedOn.id == "source") {
info.innerHTML += "&span style='color:#008000'&" + event.type + "&/span&, ";
info.innerHTML += "&span style='color:#800000'&" + event.type + "&/span&, ";
if (event.type == "dragover") {
// the dragover event needs to be canceled to allow firing the drop event
if (event.preventDefault) {
event.preventDefault ();
onload"Init ();"
id"source" style"background-color:#d0f0a0; width:200px"
Select and drag some text from this field and drop it into the target.
id"target" rows"5"
This is the target element.
id"info" style"background-color:#f0f0 font-weight:"
Did you find this example helpful?
Example HTML code 4:
This example illustrates the use of the ,
methods. Note that the
method always returns an empty string in a handler for the ondragstart event in Safari and Google Chrome so the dropped text's letters won't be in reverse order.
type"text/javascript"
function OnDragStart (event) {
if (event.dataTransfer) {
var format = "Text";
var textData = event.dataTransfer.getData (format);
// always empty in Safari and Google Chrome
if (textData) {
if (textData.length & 20) {
event.dataTransfer.clearData (format);
var reverseText = "";
for (var i = 0; i & textData.length; i++) {
reverseText += textData.charAt (textData.length - i - 1);
event.dataTransfer.setData (format, reverseText);
function OnDropTarget (event) {
if (event.dataTransfer) {
var format = "Text";
var textData = event.dataTransfer.getData (format);
if (!textData) {
textData = "&span style='color:red'&The data transfer contains no text data.&/span&";
var targetDiv = document.getElementById ("target");
targetDiv.innerHTML = textD
alert ("Your browser does not support the dataTransfer object.");
if (event.stopPropagation) {
event.stopPropagation ();
event.cancelBubble = true;
return false;
ondragstart"OnDragStart (event)" style"width:300 height:100 background-color:#80f0f0;"
Select and drag some text from this field and drop into the green zone. The dropped text's letters will be in reverse order.
The length of the dragged text cannot be longer than 20 characters!
id"target" ondragenter"" ondragover"" ondrop"return OnDropTarget (event);"
style"width:300 height:100 background-color:#80f080;"
Did you find this example helpful?
HTML elements:, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Related pages:
External links:
Del.icio.us
User Contributed Comments
Link To Us |
& . All rights reserved.