在Javascript中为文章元素添加EventListener
我试图将EventListener添加到所有文章元素中,因此当它们被单击时,它们会变成可拖动的元素. 我没有在此任务上使用jQuery. 尝试1: document.getElementsByTagName("ARTICLE").addEventListener('click', function(){ document.getElementsByTagName("ARTICLE").setAttribute('draggable', true);}); 尝试2: function draggableTrue() { var addDrag = document.getElementsByTagName("article"); addDrag.setAttribute('draggable', true); } //add event listener to articles var draggableArticles = document.
样式拖动鬼魂元素
我正面临一个问题,我正在拖动Div. 虽然幽灵元素在MacOS上看起来不错(在Chrome和Firefox上是在窗户上,但在Windows中似乎太透明了(在Chrome和Firefox上都可以. 我尝试了多种方法,但似乎没有任何作用. 那么可以样式幽灵元素吗? 另外,我试图在旅途中制作该元素的图像,并将其用作幽灵拖动图像,但透明度问题仍然存在. 解决方案 您可以通过在JavaScript中实现元素来实现此操作.这样,您可以在拖动时将CSS类应用于元素,以任何您希望的方式对其进行样式. const d = 'dragging'; const container = document.getElementById('container'); const el = document.getElementById('drag'); var cOffX = 0; var cOffY = 0; el.addEventListener('mousedown', drag
10 2023-05-16
编程技术问答社区
如何使一个嵌套的元素在可拖动的容器中不能拖动?
我正在使用HTML5拖放在父容器上,但是我想禁用对其某些孩子的拖放效果,特别是输入,以便用户可以轻松选择/编辑输入内容. 示例: https://jsfiddle.net/luzub54b/ Safari似乎默认为输入这样做,因此请在Chrome或Firefox上尝试. 解决方案 我正在寻找类似的东西,并使用Mousedown和MouseUp事件找到了可能的解决方案.这不是最优雅的解决方案,但它是唯一在铬和Firefox上为我持续工作的解决方案. 我在您的小提琴中添加了一些JavaScript: fiddle ; (function($) { // DOM Ready $(function() { $('input').on('mousedow
72 2023-04-12
编程技术问答社区
jQuery Draggable创建Draggable并在html5本机拖放api事件上开始拖动
好吧,基本上我想实现的目标是,当dragover事件从HTML5 Drag And Drop API启动时,我希望创建一个jQuery draggable对象,然后开始跟随鼠标,而dragend dragend事件从HTML5 Drag And Drop API. 发射 我想这样做的原因是: 我有一个使用插件的应用程序,该插件具有功能,该应用程序取决于jQuery.ui draggable function(它是FullCalendar Scheduler插件,版本3) 我想在应用程序中实现新功能,客户端可以从浏览器窗口a 中拖动某些内容,然后将其放入上述插件中浏览器窗口B . 正如上述插件不使用本机HTML5 Drag and Drop API,并且jQuery.ui draggable无法将元素从一个浏览器窗口拖动到另一个,我认为我唯一的选择是混合这两个插件. 我建议的解决方案是使用本机HTML5 Drag and Drop API,当拖动元素通过dropzone
32 2023-02-15
编程技术问答社区
HTML5可拖动的setDragImage在Chrome上不能与canvas一起工作
我试图在本机HTML5拖放API中使用帆布作为我的拖动图像. 问题在于它在Firefox上工作,但不能在Chrome上(58),我无法查明问题. 代码: https://jsfiddle.net.net/196urllwd/5/5/5/ DRAG ME 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); cont
158 2023-01-17
编程技术问答社区
拖放HTML(占位符)。
谁能帮我拖放占位符.我有 2 行(左右),每行有 5 个项目. 我想用简洁的动画显示占位符 (border-style: dotted;).Soo .. 在我放下要显示边框的项目之前. 您可以在下面找到我从 w3school 使用的示例 https://www.w3schools.com/html/html5_draganddrop.asp 我希望它看起来如何! 解决方案 如果你使用纯javascript: 我在 w3schools 上为您创建了这个解决方案: https://www.w3schools.com/code/tryit.asp?filename=FRCFSRF5F4RW 参见 ondragstart 和 ondragend.那里调用的函数,将边框设置为虚线或回到实线.您当然可以使用 css 值来放置,但这是基本实现. 如果你使用 jQuery ui 拖动: 在 jQuery 可拖动中使用“拖动"事件: $( "#
170 2022-08-15
编程技术问答社区
html5可拖动隐藏原始元素
当开始使用 HTML5 draggable 属性拖动元素时,原始元素仍然可见,所以我最终看到了两个元素而不是一个. 我怎样才能只让被拖动的元素可见(原来的元素应该暂时隐藏). function startDrag() { // hide initial element } function endDrag() { // reset initial element } 这是一个显示问题的 jsfiddle https://jsfiddle.net/gjc5p4qp/ 解决方案 你可能会成功这是一个 hacky 解决方案.本机可拖动性不允许 CSS 样式,例如:opacity:0;、
1316 2022-07-17
编程技术问答社区