Tag: 拖放

使用jQuery拖放表列的排序: 我正在使用jQuery来驱动我的AJAX UI。我有一个数据表，我想让用户通过拖放来重新排序表中的列。我希望用户能够抓住列的标题并移动它。下面的数据行应该遵循。请注意，我对排序数据或重新排序行感兴趣，但允许用户更改列的顺序。有现成的解决方案吗？我尝试在元素上使用标准的jQuery可排序调用，但当然这不起作用。我浏览了jQuery插件网站并没有找到任何东西。我需要编写一个jQuery插件吗？编辑：请注意，jQuery，Dojo等（免费的）实际上是JS框架的唯一选择。我无法获得像ExtJS这样商业化的许可证。

jQuery拖放到文本区域: 使用jQuery，并希望用户将占位符拖到文本区域。每个占位符都是，其中包含class=’placeholder’ 。文本区域id只是’main_text’ 。因此，用户应该能够将每个占位符span拖动到文本区域的顶部，删除它，然后插入文本。最理想的效果是在放置占位符的位置插入文本，但我几乎放弃了那个。在这一点上，只是为了让它工作，所以它在任何地方插入文本将是一个良好的开端。有没有人成功完成这个？谢谢 –

jquery拖动并旋转到角度: 我正在使用jQuery UI来拖放图像。我还想将图像旋转360度，这样我就可以像在Photoshop中一样移动和旋转它。我正在使用jQuery旋转插件在点击时旋转图像，但我想选择一个角并拖动以将图像旋转到任何角度。直播JS： http ： //jsfiddle.net/87jaR/ JavaScript代码： var test = 5; $(function() { $(‘#rotate’).draggable({ containment: ‘frame’ }); $(‘#frame img’).live(‘mousedown’, function(event) { test = test + 15; $(this).rotate({ angle: test }); }); });

当我拖动时，dragend，dragenter和dragleave立即开火: 我正在尝试制作一个可以通过拖放重新定位的元素列表。第一个元素Box 1在100％的时间内都能正常工作。有时第二个框可以工作，但其他框都没有按预期工作。一旦开始拖动它们，它们似乎立即触发所有拖动事件。如果重要的话，我正在使用最新的Chrome（第23版）。 var $questionItems = $(‘.question-item’); $questionItems .on(‘dragstart’, startDrag) .on(‘dragend’, removeDropSpaces) .on(‘dragenter’, toggleDropStyles) .on(‘dragleave’, toggleDropStyles); function startDrag(){ console.log(‘dragging…’); addDropSpaces(); } function toggleDropStyles(){ $(this).toggleClass(‘drag-over’); console.log(this); } function addDropSpaces(){ $questionItems.after(”); console.log(‘drop spaces added’); } function removeDropSpaces(){ $(‘.empty-drop-target’).remove(); console.log(‘drop spaces removed’); } 这是HTML： Box 1: Milk was a bad choice. Box 2: I’m Ron […]

上传之前拖放图像输入文件和预览: 我想创建一个div附加拖放function，当有人点击它时，他们可以选择他们的图像。我编写了一些东西，它可以 – 点击div并选择你的图像 – 在上传之前预览你的图像你可以检查我的小提琴 CSS .uploader {width:300px;height:350px;background:#f3f3f3;border:2px dashed #e8e8e8;} JavaScript的 var imageLoader = document.getElementById(‘filePhoto’); imageLoader.addEventListener(‘change’, handleImage, false); function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { $(‘.uploader’).html( ” ); } reader.readAsDataURL(e.target.files[0]); } HTML click here or drag here your images for preview and set userprofile_picture data 你可以查看http://jsfiddle.net/ELcf6/

防止JqueryUI中的列表项丢弃可排序: 我有两个列表#sortable1和#sortable 2 ，它们是连接的sortables，如本例所示。您可以将列表项从sortable1拖放到sortable 2 。但是，如果sortable 1中的项目包含类“number”，我想阻止 Sortable2的删除，从而使拖动的项目回退到可排序的1 。我在sortable2上使用了以下内容： receive: function (event, ui) { if ($(ui.item).hasClass(“number”)) { $(ui.item).remove(); } 但它会从两个表中删除列表项。任何帮助将不胜感激。

将图像从另一个网站拖放到我的网站: 我跑了一个快速谷歌搜索和搜索，发现类似的问题，但没有一个很好，大多数都是旧的，看起来被遗弃（没有答案，一段时间没有评论）。所以这里…… 我希望能够收集从另一个网站上放到我网站上的图像的url（只有url）..（即我打开了两个镀铬窗口。窗口A中有我的应用程序。窗口B在其中有重要意义我打开一个图像点击并将其拖到我的窗口然后放开。现在我需要知道我页面上丢失的图像的url。这是我正在使用本地文件的代码。 $(document).on(‘drop’, function(e) { var data = e.dataTransfer || e.originalEvent.dataTransfer; console.log(data); // data.files is empty e.preventDefault(); return false; }); 再一次，我不想上传任何东西..我不想做任何花哨的事情……我只需要知道从另一个网站上放置在页面上的图像的位置。

添加新行后拖放不起作用: 我正在使用jquery.tablednd.0.7.min.js来拖放表行。当我在表中动态添加新行（即使用javascript添加行）时，新行没有拖动n drop。可以拖动表中已存在的其他行。我认为这个新行没有与jQuery拖放代码同步。我正在添加这样的新行。这是jquery dragnDrop文件代码。在页面加载时，我使用此代码将此function分配给表 $(document).ready(function() { $(“#tableId”).tableDnD({ onDragClass : “myDragClass”, onDrop : function(table, row) { }, onDragStart : function(table, row) { console.log(“drag start”); } }); });

用jquery拖动div来改变div的位置: 我正在尝试构建一个网站，用户可以将某些项目（div中的一个项目）拖动到页面上的其他div。它不是一张桌子左右，只是在页面上的某个地方划分。使用html5拖放它运行良好，现在我尝试为移动设备执行此操作。我可以将项目拖动到div，将它们放在那里并阻止这个dropzone，因为只有一个元素应该在dropzone中。我也可以将这个元素拖到另一个div或页面上的其他地方（如果我犯了一个错误，可放置区域只能在第一次删除div时工作）但是我不能在div中删除另一个现在为空的项目再次。如何再次启用Dropzone中的丢弃？如果一个被拖到另一个div上，是否有可能改变两个div的位置？这是我的代码的相关部分： $ (init); function init() { $(“.dragzones”).draggable({ start: handleDragStart, cursor: ‘move’, revert: “invalid”, }); $(“.dropzones”).droppable({ drop: handleDropEvent, tolerance: “touch”, }); } function handleDragStart (event, ui) {} function handleDropEvent (event, ui) { $(this).droppable(‘disable’); ui.draggable.position({of: $(this), my: ‘left top’, at: ‘left top’}); ui.draggable.draggable(‘option’, ‘revert’, “invalid”); } Item 1 Item 2 […]

jQuery UI可排序和两个连接列表: 我试图将以下内容与jQuery和Sortable放在一起：我需要抓住两种情况：答：移动同一列表中的项目 B：将项目从一个列表移动到另一个列表仅使用receive事件时解决案例B. 但是如果我同时绑定receive和stop它们也会在将项目从一个列表移动到另一个列表时被解雇。这使得我无法捕获案例A，因为我无法确定该项目是从其他列表移动还是在同一列表中移动。希望有道理。这有点奇怪，因为我会认为我的用例是最常用的用例。我渴望创意。如果您想尝试一下，请参阅http://jsfiddle.net/39ZvN/5/ 。 HTML： item 1 item 2 item 3 item 4 item 5 item 6 JS： $(function() { $(‘.sortable’).sortable({ stop: function(event, ui) { // Wird auch aufgerufen wenn von Liste X nach Liste Y gezogen wird if(!ui.sender) alert(“sender null”); else alert(“sender not null”); }, receive: function(event, […]