标签: html5-draggable

当开始使用HTML5 draggable属性拖动元素时,原始元素仍然可见,因此我最终得到两个可见的元素而不是一个.

如何只拖动可见的元素(原始元素应暂时隐藏).

<script>
  function startDrag() {
    // hide initial element
  }

  function endDrag() {
    // reset initial element
  }
</script>

<div class="draggable" draggable="true"
  ondragstart="startDrag(event)"
  ondragend="endDrag(event)"
></div>

这是一个显示问题的jsfiddle https://jsfiddle.net/gjc5p4qp/

我正在构建一个A4大小的拖放页面构建器.此构建器可以包含的元素是图像和文本框.

我正在寻找可用于构建此类前端功能的框架的一些建议.

我所追求的例子,请看这里 canva.com

这两个框架我想是到目前为止是fabric js和greensock draggable,这不符合我的需求或相当难以形成完整的页面生成器.

理想情况下,我不想使用画布.

编辑:基本功能:

• 种植
• 回转
• 大小调整
• 更改文本框的字体样式/颜色/大小
• 添加背景
• 帧/掩蔽图像(方形图像可以变成带有叠加的星形)

情况:我正在使用HTML5拖放将瓷砖放在我正在编写的游戏中.我想添加一个效果,其中两个瓷砖,我即将放置一个新的瓷砖之间稍微移动,以表明这是你正在下降的地方(类似于Mac OS底座).

我的方法:我有一个flexbox我正在丢弃这些瓷砖的东西.我写了一个函数,基本上返回一个正弦波周期,我用它来更新丢弃的瓷砖right:和top:CSS属性(瓷砖position: relative;),基于它们相对于鼠标的原始位置drag.

  // Update occupant style for desired effect
  occupants.forEach(function(occupant, index) {
    $(occupant).css({'right' : -10 * nudgeSine(occupantsMouseOffset[index] * 10) + 'px',
                     'top' : -10 * Math.abs(nudgeSine(occupantsMouseOffset[index] * 10)) + 'px',
                     'opacity' : 1 - Math.abs(nudgeSine(occupantsMouseOffset[index])) });
  });

  // Function to return 1 period of a sine wave
  function nudgeSine(x) {
    if (x < -3.14159 || x > 3.14159) {
      return 0;
    } else {
      return Math.sin(x); …

我正在努力克服HTML5拖延,因为我想要实现特定的东西.

我有一个可以使用HTML5 API拖动的div,但我只想让用户真正意味着拖动(因为它之后会触发一些更多的处理程序).

这就是为什么我dragstart在满足某个条件时触发的原因mousemove.

var fnMousemove = function (oEvent) {
    if (myCondition) {
        document.removeEventListener("mousemove", fnMousemove);
        oDraggable.setAttribute("draggable", true);
        oDraggable.addEventListener("dragstart", fnDragstart);
        oDraggable.addEventListener("drag", fnDrag);
        oDraggable.addEventListener("dragend", fnDragend);

        // Fire a dragstart event, now that we know what to do with it
        var e = document.createEvent("MouseEvents"); //$NON-NLS-1$
        e.initEvent("dragstart"); //$NON-NLS-1$
        oDraggable.dispatchEvent(e);
    }
};

但是正如你已经可以猜到的那样,在dragstart正确触发的情况下,这不起作用,但没有其他拖拽事件(drag,dragend...).

有什么我在那里没有妥善处理？或者你能看到一个解决方法来从mousemove处理程序启动浏览器的拖放吗？(按下鼠标按钮)

提前致谢!

你可以在这里找到一个简单的运行示例

有一个带有可拖动行的表格，每行所在的行draggable=true，用户如何仍然能够从列中选择文本？

<table>
 <thead>..</thead>
 <tbody>
  ..
  <tr draggable="true">
   <td>..</td>
   <td>Cool text but you can't select me</td>
   <td>..</td>
  </tr>
  ..
</tbody>
</table>

另一个简单的例子（https://codepen.io/anon/pen/qjoBXV）

div {
  padding: 20px;
  margin: 20px;
  background: #eee;
}

.all-copy p {  
  -webkit-user-select: all;  /* Chrome all / Safari all */
  -moz-user-select: all;     /* Firefox all */
  -ms-user-select: all;      /* IE 10+ */
  user-select: all;          /* Likely future */   
}    
<div class="all-copy" draggable="true">
      <p>Select me as text</p>
    </div>

我在父容器上使用 HTML5 拖放功能，但我想禁用其某些子容器（特别是输入）的拖动效果，以便用户可以轻松选择/编辑输入内容。

示例： https: //jsfiddle.net/Luzub54b/

<div class="parent" draggable="true">
   <input class="child" type="text" value="22.99"/>
</div>

Safari 似乎默认对输入执行此操作，因此请在 Chrome 或 Firefox 上尝试一下。

我正试图抓住html5拖放事件.

function rowDragStart(event) {
    let targetRowId = event.target.attributes.row.value;
    event.dataTransfer.setData("text/plain", targetRowId);
}

function rowDragOver(event) {
    event.preventDefault();
    let draggingId = event.dataTransfer.getData('text');
}

现在我只是想在dragStart中的dataTransfer对象中添加一些内容,并在dragOver中检索它.问题是它没有拖延.我设置了断点,这些事件被调用,但getData('text')返回空字符串,以及我能想到的其他所有可能性.

我正在尝试设置一个自定义数据，它是我的拖动事件上的 HTML 元素。到目前为止我这样做了：

element.addEventListener('dragstart', event => {
  event.dataTransfer.setData('custom-data', document.querySelector('.the-element')
})

dropzone.addEventListener('drop', event => {
  const data = event.dataTransfer.getData('custom-data') // this is empty
})

有没有办法做到这一点？

JSON.stringify在将元素传递给拖动事件之前，我已经尝试对其进行操作。但JSON.stringify不适用于 HTMLElement 对象

来自 mdn 的参考文献说可以使用自定义数据

我刚刚学习了 HTML5 可拖放 API 的基础知识。我不知道如何将拖动的位置保留在其放置的位置。掉落时它会改变其位置。

这是基本的 HTML（仅相关元素）：

onDragStart = function(ev) {
  //...
}

drop_handler = function(ev) {
  ev.preventDefault();
  ev.target.appendChild(document.getElementById("id1"));
}

dragover_handler = function(ev) {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move";
}

<div id="id1" draggable="true" ondragstart="onDragStart(event)" style="border:2px solid green; cursor:pointer;width:100px;height:50px;">Dragged Div</div>


<div id="id2" style="position:absolute;left:100px;top:200px;border:2px solid red; cursor:pointer;width:200px;height:200px;" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Div
</div>

我希望拖动的元素保持在其被放置的最终位置。任何指示将不胜感激。

我试图在本机 HTML5 拖放 API 中使用画布作为我的拖动图像。

问题是它适用于 Firefox，但不适用于 Chrome (58)，我无法确定问题所在。

代码：https : //jsfiddle.net/196urLwd/5/

<div id="thing" draggable="true">DRAG ME</div>

function onDragStart(event){

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    canvas.width = 100;
    canvas.height = 20;

    context.fillStyle = '#333333';
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = '#999999';
    context.font = 'bold 13px Arial';
    context.fillText('DRAGGING...', 5, 15);

    event.dataTransfer.setData('text', 'lorem ipsum');
    event.dataTransfer.effectAllowed = 'copy';    
    event.dataTransfer.setDragImage(canvas, -15, 9);

};

var theThing = document.getElementById('thing');
theThing.addEventListener('dragstart', onDragStart, false);

我究竟做错了什么？