DataTransfer.effectAllowed link属性值演示实例页面

CSS代码：

.box { width: 256px; height: 171px; border: 1px solid #ccc; background-color: #f5f5f5; }
                

HTML代码：

<a href="#" id="link">拖拽我到下面框框试试</a>
<p id="box" class="box"></p>
                

JS代码：

var isOpenLink = null;
link.addEventListener('dragstart', function (event) {
    event.dataTransfer.effectAllowed = 'link';    
});
// 检测是需要新窗口打开链接的浏览器
box.addEventListener('dragenter', function (event) {
    if (isOpenLink === null) {
        isOpenLink = (event.dataTransfer.dropEffect !== 'link');    
    }
});
box.addEventListener('dragover', function (event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'link';
});
// 打开链接
box.addEventListener('drop', function (event) {
    event.preventDefault();
    if (isOpenLink) {
        window.open(link.href);
    }
});