Tag: 拖放

使用jQuery拖放时保留元素的副本: 我正在使用Jquery拖放，我想保留我拖动的元素的副本。 $(‘.draggable’).draggable({ revert: “invalid”, stack: “.draggable” //helper: ‘clone’ }); $(‘.droppable’).droppable({ accept: “.draggable”, drop: function( event, ui ) { var droppable = $(this); var draggable = ui.draggable; // Move draggable into droppable draggable.appendTo(droppable); draggable.css({top: ‘5px’, left: ‘5px’}); } }); 的jsfiddle 因此，如果我将红色方块拖到灰色框中，红色方块的副本会保留在同一个位置，我可以拖动任意多个。谢谢。

使用拖放下载文件: 我想使用用户计算机和Web浏览器之间的拖放来上传和下载文件。我该怎么做ASP.NET/AJAX或JS / JQuery？

没有相同维度的JQuery可排序网格function: 我希望创建一个可排序（通过拖放）网格，类似于JQuery的可排序网格（ http://jqueryui.com/demos/sortable/#display-grid ）。但是，Sortable要求您仅使用具有相同尺寸的div。出于我的目的，允许每个块具有不同的宽度和高度。我正在寻找的function是捕捉网格function，同时“推”其他元素。除了防止它们重叠并将其他元素推开之外，Draggable可以完成所有操作。哦，它也不一定是Jquery。如果它更容易，我愿意使用其他方法。

html 5中event.originalEvent.dataTransfer.files和event.dataTransfer.files之间的区别: 有什么区别 event.originalEvent.dataTransfer.files 和 event.dataTransfer.files ??? 因为在拖放，第二个代码不起作用，它是未定义的，我必须使用第一个代码，因为它的工作原理！

dataTransfer.setData在IE9中不起作用: 我用jquery将一些代码绑定到dragstart事件，如下所示： $new.on(‘dragstart’, function(event) { event.originalEvent.dataTransfer.setData(“text/html”, $new.clone().wrap(”).parent().html()); }); $new是一个jquery对象。目的是将拖动元素的html附加到事件，以便我可以在删除时创建副本。 Chrome甚至不需要此活动。添加此代码时，Firefox可以运行。但IE9抛出SCRIPT65535: Unexpected call to method or property access. 当事件被触发时。这是一个jsFiddle： http ： //jsfiddle.net/j52EM/3/ 我如何为IE工作？

JQuery UI Draggable＆Droppable“Revert”和“Out”冲突: 我试图使它可以拖动多个可拖动的项目只能拖放到1个droppable。如果丢弃在droppable之外然后恢复。除了一个bug之外，我的大部分代码都有效：用户将项目拖放到droppable中。然后拖出（执行输出function）然后他没有放入droppable（恢复发生，拖动回到之前的droppable）。有效发生的事情是droppable现在可以接受任何拖动（因为拖动离开，执行），而拖动从未实际因为恢复而离开。我一直试图解决这个问题几个小时，并已经通过API。我甚至尝试使用回调函数进行还原，但由于对如何检索可拖动的droppable的困惑，我被卡住了。 //revert if not dragged to a draggable. $( “[id|=drag]” ).draggable({ revert: ‘invalid’, revertDuration: 350 }); $( “.dropZone” ).droppable({ drop: function(ev,ui) { $(this).droppable(‘option’, ‘accept’, ui.draggable); //only accept the current drag. }, out: function(ev, ui) { $(this).droppable(‘option’, ‘accept’, ‘[id|=drag]’);//now you can accept any drag. } }); jsFiddle： http ： […]

使用带有kineticJs的jquery draggable UI来使元素对齐网格？: 我是jquery的新手我已经使用Kinetic.js实现了拖放操作我在html中有一些图像并且我将它们传递给javascript函数并使它们可拖动。有两组图像..现在我想要如果它们靠近，它们会互相对齐。我是jquery的新手所以我不知道怎样才能将动能js图像变量传递给jquery操作，他们已经传递了img id标签。此外，我无法弄清楚jquery函数的放置位置以及如何… 这是代码..有人请帮忙.. canvas { border: 1px solid #9C9898; } #img { position:absolute; left:700px; top:150px; } #img1 { position:absolute; left:800px; top:150px; } 加载jquery库 Kinetic.js-加载图像并使em可拖动 function drawImage(imageObj){ var stage = new Kinetic.Stage(“container”, 578, 500); var layer = new Kinetic.Layer(); var x = stage.width / 2 – 200 / 2; var y = stage.height / […]

获取已删除的元素ID而不是删除目标ID: 我对jQuery相当新，并且我试图将拖动的图像元素id附加到放置目标而不是图像元素本身或放置目标id。我正在使用html5原生DnD。到目前为止，我可以通过使用drag函数中的datatransfer方法和drop中的getdata函数发送其id来获取元素本身。每当我尝试从drop中调用该id时，它会获得drop target id而不是拖动的元素。任何帮助将非常感激，因为我已经在网上彻底搜索，并找到了更多的方法来获得丢弃区域的目标ID。这是我当前代码小提琴的片段： function allowDrop(ev) { ev.preventDefault(); } function dragStart(ev) { ev.dataTransfer.setData(‘Text/html’, ev.target.id); // sends the dragged images data. //alert(ev.target.id); // alerts the correct id of the dragged image. } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData(“text/html”);//retrieves dropped images data. ev.target.appendChild(document.getElementById(data));//this displays the dropped image. //alert(ev.target.id); // alerts the […]

拖动：替换数据: 我有一个网页，其中包含一些html元素，包括textarea和嵌入式conrameteditable iframe（arte）。使用此代码，我设法捕获主页面上的draggesture事件并设置text / html-data jQuery(document).bind(‘draggesture’, function(event){ event.originalEvent.dataTransfer.setData(‘text/html’, ‘my_data’); }); 现在，当放入主页上的textarea时，’my_data’会被删除。放入令人满意的iframe也会丢掉’my_data’。但我在这里有三个问题，我不明白： 1.将这种处理程序绑定到iframes文档是有效的。我将事件数据设置为与上面的代码类似，但它不起作用。当我将它拖到iframe内或主页上的textarea时’my_data’没有插入，而是原始选中的内容。我该怎么做才能设置’my_data’？ 2.我尝试使用iframe和主页面中的drop事件修改/设置数据： jQuery(ed.getDoc()).bind(‘drop’, function(event){ event.originalEvent.dataTransfer.setData(‘text/html’, ‘my_data’); }); 但是我在两个文档（主页面和iframe）上都出现了javascript错误：“此文档不允许进行修改”。为什么我会收到此错误？这有解决方法吗？看起来pimvdb得到了解释。 3.当从主页面选择 some text some text 并将其拖入到contenteditable iframe中时，当我使用“my_data”（在Draggesture上）设置时，不会插入任何文本上面的第一个代码示例。拖入textarea工作。有谁知道这里出了什么问题？（使用chrome不会出现问题！）编辑：这是一个jsFiddle演示，可以解决问题： http://jsfiddle.net/R2rHn/5/

包括孩子在内的jQuery dragenter或dragover: 我目前正在处理上传脚本，当然它还具有拖放function。但是我试图让这个工作当我在我的元素上拖动一个文件时它会添加类拖动但是因为我的元素有子节点它会不断触发因为它进入和离开元素。我想知道的是如何扩展*dragenter* / *dragover*以包括儿童的主要元素？这是我的代码的精简版（请注意我已禁用文件输入）： $(document).ready(function(){ $(window).on(‘dragenter’, function(){ $(this).preventDefault(); }); $(‘#drag-and-drop-zone’).on(‘dragenter’, function(){ $(this).addClass(‘drag-over’); }); $(‘#drag-and-drop-zone’).on(‘dragleave’, function(){ $(this).removeClass(‘drag-over’); }); }); .uploader { width: 100%; background-color: #f9f9f9; color: #92AAB0; text-align: center; vertical-align: middle; padding: 30px 0px; margin-bottom: 10px; border-radius: 5px; font-size: 200%; box-shadow: inset 0px 0px 20px #c9afb2; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; […]