drag-cursor-notallowed.html [plain text]
<html>
<head>
<style>
#dropTarget, #dragMe { text-align: center; display: table-cell; vertical-align: middle }
#dropTarget {width: 256px; height: 256px; border: 1px dashed}
#dragMe {-webkit-user-drag: element; -webkit-user-select: none; background: #ff0000; width: 64px; height: 64px; color: white}
.pass { font-weight: bold; color: green; }
.fail { font-weight: bold; color: red; }
</style>
<script>
var dragMe;
var dropTarget;
var messageElm;
var defaultMessageElm;
var event;
var ALLOWED_EFFECTS = 'move';
var DROP_EFFECT = 'copy';
window.onload = function()
{
dragMe = document.getElementById("dragMe");
dropTarget = document.getElementById("dropTarget");
messageElm = document.getElementById("message");
defaultMessageElm = document.getElementById("default-message");
if (!dragMe || !dropTarget || !messageElm || !defaultMessageElm)
return;
dragMe.ondragstart = dragStart;
dragMe.ondragend = dragEnd;
dropTarget.ondragenter = dragEntered;
dropTarget.ondragover = dragOver;
dropTarget.ondrop = drop;
}
function dragStart(e)
{
event = e;
e.dataTransfer.effectAllowed = ALLOWED_EFFECTS;
e.dataTransfer.setData('Text', e.target.textContent);
}
function dragEnd(e)
{
messageElm.style.visibility = "hidden";
defaultMessageElm.style.visibility = "visible";
return;
}
function dragEntered(e)
{
messageElm.style.visibility = "visible";
defaultMessageElm.style.visibility = "hidden";
dragEnteredAndUpdated(e);
}
function dragOver(e)
{
dragEnteredAndUpdated(e);
}
function dragEnteredAndUpdated(e)
{
event = e;
e.dataTransfer.dropEffect = DROP_EFFECT;
cancelDrag(e);
}
function drop(e)
{
cancelDrag(e);
}
function cancelDrag(e)
{
if (e.preventDefault)
e.preventDefault();
else {
e.returnValue = false;
}
}
</script>
</head>
<body>
<p id="description">This test can be used to verify that the not-allowed cursor is shown during an invalid drag-and-drop operation.
In particular, if the effectAllowed is <code><script>document.write(ALLOWED_EFFECTS)</script></code> and the dropEffect of the
drop target is <code><script>document.write(DROP_EFFECT)</script></code> then the drop is not allowed and the cursor should
change to the not-allowed cursor. Note, this test only pertains to the Windows build since the Mac build does not show a drop cursor
for a not-allowed drop operation (see bug #25925).
<br/><br/>
Drag the red square over the drop target (demarcated by the dashed boundary). While hovering over the drop target, if the cursor
is <img alt="not-allowed" src="data:image/gif;base64,R0lGODlhEgASAIAAAAAAAP///yH5BAAAAAAALAAAAAASABIAAAIvjA+px6ifmnmM1ijDmlbuuHmAhoWXaTqYKq7sObZw3HwgXd8cPr8yDGxBXEJioAAAOw=="> then the test <span class="pass">PASSED</span>. Otherwise, the test <span class="fail">FAILED</span>.</p>
<div id="test-container">
<label for="effectAllowed">effectAllowed:</label> <code><script>document.write(ALLOWED_EFFECTS)</script></code>
<br/><br/>
<div id="dropTarget">
<div id="default-message">Drag the red square over me.<br/><br/>
<label for="dropEffect">Expects dropEffect:</label> <code><script>document.write(DROP_EFFECT)</script></code>
</div>
<div id="message" style="visibility:hidden">The cursor should be <img alt="not-allowed" src="data:image/gif;base64,R0lGODlhEgASAIAAAAAAAP///yH5BAAAAAAALAAAAAASABIAAAIvjA+px6ifmnmM1ijDmlbuuHmAhoWXaTqYKq7sObZw3HwgXd8cPr8yDGxBXEJioAAAOw==">. Is it?</div>
</div>
<hr/>
<p>Items that can be dragged to the drop target:</p>
<div id="dragMe" draggable="true">Square</div>
<hr/>
</div>
</body>
</html>