Tag: 拖放

如果在validation后我决定将元素移回？如何设置jquery-ui draggable revert为true？

我正在寻找一种方法来触发事件从恢复状态，如果某些事情没有validation，例如，如果元素存在，它将从另一个列表创建它，但如果它已经存在，它应该转到else并将元素返回到它原来的位置： $( “#catalog ul” ).droppable({ tolerance: ‘fit’, activeClass: “ui-state-default”, hoverClass: “ui-state-hover”, accept: “:not(.ui-sortable-helper)”, drop: function( event, ui ) { //check if already exists if($(this).find(“#”+$(ui.draggable).attr(“id”)).length==0){ $( “” ).text( ui.draggable.text() ).appendTo( this ) .draggable({ revert: ‘invalid’, stop: function(){ $(this).draggable(‘option’,’revert’,’invalid’); } }).droppable({ greedy: true, tolerance: ‘touch’, drop: function(event,ui){ ui.draggable.draggable(‘option’,’revert’,true); } }); }else{ //want to make the object go […]

JQuery – 拖动删除文件 – 如何获取文件信息？

有兴趣使用JQuery / AJAX / PHP构建我自己的drag’n’drop文件上传器。 基本上我想要一个文件上传器，我的网站用户只需将文件从他们的计算机拖到我创建的div中，然后它就会将文件上传到选定的目的地。 我想从头开始构建这个，而不是使用任何插件，以便我可以更好地操纵限制（文件类型，大小，目标文件夹等） 谷歌搜索没有运气，只有插件。 无论如何可以引导我朝着正确的方向前进？ 更新好的，所以我想出了如何做我想要的。 只需将文件输入字段不透明度设置为1即可隐藏，您仍然可以将文件拖到该常规区域，如果您点击文本字段，它将捕获它。 但是，我想知道如何增加文件输入字段的高度/宽度（在文件上尝试了基本的css，但它只增加了’浏览’按钮的大小，而不是你可以将文件放入的实际字段。任何想法如何做到这一点？我基本上想要一个大的方形div，说’在这里删除文件’。所以我需要调整输入字段的大小。

Internet Explorer中的HTML5拖放问题（无法访问dataTransfer属性）

我正在尝试使用HTML5实现基本的拖放function。 它在Chrome中完全正常，但在IE10中我得到一个0x8000ffff – JavaScript runtime error: Unexpected call to method or property access. 行setData错误。 function handleDragStart(e) { e.dataTransfer.effectAllowed = ‘move’; e.dataTransfer.setData(“dropTarget”, g.destination); } var cols = $(“#” + g.source + ” tbody > tr”); [].forEach.call(cols, function (col) { col.addEventListener(‘dragstart’, handleDragStart, false); }); 我究竟做错了什么？

HTML5拖放行为

我正在广泛使用HTML5本机拖放，它几乎完全表现自己，只有一个小例外。 当任何东西被拖到页面上时，我正在尝试突出显示我的下拉区域。 我最初试图通过在文档体上放置jQuery侦听器来实现这一点，如下所示： $(“body”).live(‘dragover’,function(event){lightdz(event)}); $(“body”).live(‘dragexit dragleave drop’,function(event){dimdz(event)}); 使用lightdz（）和dimdz（）更改页面上所有dropzones的背景颜色样式属性，使它们脱颖而出。 这没用。 每当拖动的对象进入页面上的子元素（如div容器）时，侦听器就会将其标记为dragleave事件并使dropzones变暗。 我通过将侦听器应用于页面上的所有可见元素而不仅仅是正文来解决这个问题。 当它跨越一个元素和另一个元素之间的边界时，它们偶尔会有一些轻微的可见闪烁，但它看起来很好。 无论如何，现在我已经改变了lightdz（）和dimdz（），以便他们将快速的jQuery fadeTo（）动画应用到所有非dropzones。 这在它工作时看起来很棒 ，并且使用户非常清楚它们能够做什么，也不能放弃。 麻烦的是当它在元素边界之间传递时，它应用淡入淡出动画。 这比背景颜色的偶然闪烁要明显得多，特别是因为如果对象被快速拖过多个边界，它将对动画进行排队并使页面反复淡入淡出。 即使我不打扰fadeTo（）动画，只是改变不透明度，它比背景颜色闪烁更明显，因为整个页面改变而不仅仅是dropzone元素。 有没有办法将整个页面作为单一元素引用，以用于dragover和dragleave事件？ 如果失败了，有没有办法检测在浏览器窗口之外发生的丢弃？ 如果我跳过dragleave事件，它看起来很好，但如果任何对象被拖过浏览器窗口然后掉到它外面，整个页面都会褪色。

Jquery，拖放并保存到mysql数据库？

我一直在网上搜索，我只能找到inettuts-with-cookies，它教会了如何使用Jquery执行拖放然后保存在cookie中。 任何人都可以告诉我如何保存到数据库（PHP和MySQL）？ 我非常需要.. 编辑： 首先，我不是php初学者，而是AJAX初学者。 这些教程仅适用于1列。 是否有人拖放并保存到2或3列的数据库？ 请>>>

Jquery拖放和克隆

嗨，我需要实现这个.. 我有一套可放置的物品（基本上我是在服装上放下设计）而且我正在放弃一个克隆.. 如果我不喜欢被丢弃的对象（设计） – 我想通过做一些像隐藏的东西来删除它。 但我无法做到这一点。 请帮我.. 这是代码 var clone; $(document).ready(function(){ $(“.items”).draggable({helper: ‘clone’,cursor: ‘hand’}); $(“.droparea”).droppable({ accept: “.items”, hoverClass: ‘dropareahover’, tolerance: ‘pointer’, drop: function(ev, ui) { var dropElemId = ui.draggable.attr(“id”); var dropElem = ui.draggable.html(); clone = $(dropElem).clone(); // clone it and hold onto the jquery object clone.id=”newId”; clone.css(“position”, “absolute”); clone.css(“top”, ui.absolutePosition.top); clone.css(“left”, ui.absolutePosition.left); clone.draggable({ containment: ‘parent’ […]

Jquery Draggable – 如何动态创建一个新的可拖动div，然后可以拖动？

我正在使用jquery，draggable和droppable创建一个日程计划器。 将作业从未分配列拖动到小时时段时，将删除原始可拖动项，并将新div放入页面，并显示作业详细信息。 这个新创建的div代码块，其中包含所有参数以使其可拖动。 当它在页面加载时呈现时，这些分配的作业是可拖动的。 只有在使用javascript动态创建它们时才会发生阻止它们被拖拽的事情。 当我使用Javascript动态创建这些新的div标签时，我是否需要做些什么来告诉jquery这些新项目是否应该被拖动？ （一如既往地感谢） 脚步 我们有一个div容器，里面有一个作业列表（更多的div）。 #unassignedjobs是这些作业的父div，里面有以下作业，＃jobN，＃jobN2，＃jobN3 我们有另一个区域，我们可以将这些项目放入，并且在这个区域内是一个用于显示工作的容器，每个人，我们称之为＃person1和＃person2。 目的是从未分配的作业列表中拖动作业，并将其放入人员作业列表中 在我这样做的那一刻，当一个项目被删除时，我刷新 ＃person1里面的所有html，并使用ajax / php重新创建这个人的作业列表（＃person1），并使用innerHTML重新填充＃person1。 每次从php创建页面时，＃person1内的任何作业都会在激活jquery时出现，使它们可以拖动。 只有在运行innerHTML的刷新和重新填充时，才能将项目（＃jobN或＃jobN2）无法拖动 var createdContent = httpRequest.responseText; jobcolp.innerHTML = createdContent; 希望这会使问题更加清晰。

拖放，防止尴尬的突出显示？

我正在构建一个拖放方法，使用查询-onmousedown导致-onmousemove（拖动）然后-onmouseup（unbinds onmousemove） 问题是，浏览器默认开始突出显示onmousemove，它会遍布整个页面并取消事件，使其无法使用。 任何想法如何防止突出显示，因为preventDefault似乎没有工作。 这是我的代码（是的，非常草率，对不起！） $(“.middleRow”).mousedown(function(){ calculateSelection(); $(‘body’).append(”+numSelected+’messages’); $(document).mouseup(function(){ $(‘.messageDrag’).fadeOut(500); setTimeout(function(){ $(‘.messageDrag’).remove(); }, 500); $(document).unbind(); }) $(document).mousemove(function(e){ e.preventDefault(); var x = e.pageX; var y = e.pageY; $(“.messageDrag”).css(“left”, x-49); $(“.messageDrag”).css(“top”, y-49); }); });

拖放：如果图像是链接（不是链接的URL），如何获取图像的URL

我有这个代码： function drop(evt) { evt.stopPropagation(); evt.preventDefault(); var imageUrl = evt.dataTransfer.getData(‘URL’); alert(imageUrl); } 小提琴 如果删除元素，它会提醒图像的URL。 到现在为止还挺好。 我的问题是，如果你删除元素，它会提醒元素的href的url。 我想提醒中的元素的url，就像你在上面的例子中下载图像一样。 那可能吗？ 我不介意使用Jquery或任何其他库。 我只想在元素中获取图像的url。 重点是将图像链接从其他网站拖到我的网站并获取图像的url。 为了更清楚我想要实现的目标，请尝试在此post下拖动我的个人资料图片并将其放入小提琴中。 它提醒http://stackoverflow.com/users/3074592/laaposto 。 我希望http://sofzh.miximages.com/javascript/juvdV.jpg?s=32&g=1收到提醒。 我希望该解决方案适用于最新版本的Chrome和Firefox。

没有jQuery UI的jQuery Sortable

我需要“可排序的拖放”function，我正在使用jQuery。 我真的不能使用jQuery UI，因为对于这个项目来说，这将是一个开销（我需要添加许多KB的JS和CSS才能使用一小部分function）。 有没有你可以推荐的插件，或者是一个简单的实现路径，我可以遵循？ 解决方案必须尽可能轻量级，最好基于jQuery / Sizzle或纯JavaScript。