每当DOM对象被拖放到html5画布上时,我都试图调用处理程序函数,但是由于某种原因,事件没有被触发。
据称,我正在寻找的活动是drop或dragend。这是直接从这个参考。
dragend -拖动操作正在结束(通过释放鼠标按钮或单击转义键) drop -一个元素被拖放到一个有效的目标上。
下面是我设置的一个简单测试用例的JS小提琴。我设置了记录器函数,这样就可以测试触发了哪些事件。一个橙色的帆布上有一个按钮和一个黑点的图像。黑点和按钮都是可拖动的元素。当它们被拖放到画布上时,不会触发drop或dragend事件。为什么不行?
唯一被触发的拖动事件是dragover!
HTML
<di
我已经阅读了许多关于SO的拖放线程,但我还没有找到一个告诉我如何在拖放元素时获取被拖放元素的子元素id的方法。
例如,如果您有
<div id='drag'>
<img id="something"/>//how do i get this id when #drag is dropped?
</div>
<div id='drop'>
</div>
和js
$('#drag').draggable({
containment: '#content
问题解决了==使用d3.drag()代替d3.behaviour.drag()并使用d3-drag.v1.min.js
我用D3js设置了一个SVG棋盘,使用for循环遍历每一行和每列。我对棋子使用了unicode,所以每个棋子都是一个svg元素。
我试图用D3js的拖曳行为来拖动棋子,但不可能。
所有棋子都有“可拉”类。因此,我创建了拖放,并将其附加到所有具有类"draggable“的元素中。
var drag = d3.behavior.drag()
.origin(function() {
var t = d3.select(this);
我正在创建一个带有拖放问题的问题生成器,并且我有一个问题要检查哪个元素被删除在哪个拖放区中?
老实说,我不知道是否只使用Javascript,或者我需要另一个库,因为我使用的是普通的JS。
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.
我正在努力在私人web应用程序上使用python中的Selenium执行拖放或点击并按住操作。
我试着在这里的一个公开例子中重现我的错误:
下面是我的拖放/点击和按住的基本代码
from selenium import webdriver
from selenium.webdriver import ActionChains
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.get('http://the-internet.herokuapp.com/drag_and_drop
我试图构建一个简单的Javascript来拖放图像。被拖放后的图像应该在原来的位置重新生成。我正在尝试这样的方法,但它似乎不起作用;它无法再现画面:
我的js功能:
var nPedY = 21;
var nPedR = 21;
var red = new Image(50,50);
red.src = "red.png";
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
我真的有jQuery拖放的问题。所以让我来解释一下这种情况。
我想要实现的是:当你在时间线上拖动一个雨滴时,div中的id和它所放到的项中的id应该在拖放之后立即存储到我的数据库中。
我用ajax做到了这一点,下面是代码:
$('#dropzone ul li').droppable({
drop: function(event, ui) {
var day = $(".confirmday").val();
var $drag = $(ui.draggable),
var $drop = $(this);
我制作了一个带有输入表格的网页。用户可以单击框或拖放文件。
我没有问题点击和上传。
这里的问题是拖放上传。每当我将文件拖放到所需的区域时,这些文件就会在DataTransfer中注册,但它不会触发拖放,因此不会进行进一步的处理。
$form.trigger('submit') --我使用这一行来触发拖放,但是它再次触发了<input>,并且返回了一个空文件,而不是DataTransfer中的文件。
代码链接:
这是完整的JS代码。
//The code that triggers when the file is dropped. The trigger code
我使用的是JQuery-ui draggable & droppable。我想要将拖放的元素添加到拖放目标容器中,同时保留拖放时的外观位置。使用.html()可以保留由.draggable()函数添加的位置数据,但因为它们成为新元素的子元素,所以它们捕捉到与该元素相关的新位置。我尝试了helper:clone,但发现它删除了所有的定位信息。
下面是我的代码,它将拖放的项目添加到拖放目标中,并在每次拖放前一个拖放项目时生成一个新的拖拽项目。它是有效的,除了被拖放的元素的位置是错误的-它们应该保持它们在被拖放时的视觉位置。
var $foo = 1;
var bar = "drag
我正在创建一个应用程序,其中我实现了Html5拖放功能,它工作得很好。现在,它是一个应用程序,其中可能会下降项目,在这种情况下,我想再次拖动元素,并下降到以前的位置。我在这里看到了一个示例插件,但它使用了MochiKit.js作为示例,并且我不想要任何外部http://ashishware.com/MochikitDnD.shtml /js。请为我提供一个相同的样本或代码。我的拖放代码如下所示:
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{