使用 javascript 访问 `draggable` 属性

Posted 2023-05-08

【中文标题】使用 javascript 访问 `draggable` 属性

【英文标题】：Access the `draggable` attribute with javascript

【发布时间】：2013-03-26 06:14:31

【问题描述】：

所以问题是：你怎么能做到这一点？我想将draggable 属性更改为"false"，这样之前可拖动的元素将失去该属性。

我会给你一个 div，这样你就可以开始：

     <div id="div1"  draggable="true" ondragstart="drag(event) "onDblClick="edit('div1')">
     </div>

【参考方案1】：

document.getElementById('div1').setAttribute('draggable', false);

或

var elem = document.getElementById('div1');
elem.setAttribute('draggable', false);

如果您希望该属性完全消失，请使用；

elem.removeAttribute('dragable');

【讨论】：

是的！谢谢你，先生！真的很有用！

【参考方案2】：

有很多方法，如果你用jQuery:

    $('#div1').attr('dragabble'); //returns with the value of attribute
    $('#div1').attr('dragabble','false'); //sets the attribute to false

原生 JS：

    document.getElementById('div1').getAttribute('draggable'); //returns the value of attr
    document.getElementById('div1').setAttribute('draggable', 'false'); //set the value of attr

【参考方案3】：

我参加聚会有点晚了，但是我们有什么理由不想写这样的东西吗？

var el = document.createElement('div');
el.draggable = false;

似乎对我来说可以很好地应用该属性。

【参考方案4】：

您可能想使用 jquery-ui 可拖动组件来实现您所需的功能.. 或者如果你的开发环境中有 jquery 库，你可以使用以下代码

$("#div1").attr('draggable',false);

或者使用javascript我们可以这样做

document.getElementById('div1').setAttribute('draggable', 'false');

【参考方案5】：

将属性draggable 设置为true 后，您通常需要处理dragstart 事件。在原生 JS 中做到这一点：

elem.addEventListener('dragstart', ev => 
  // dragstart handlings here
  , false)