Tag: 拖放

jQuery draggable sortable，在删除元素上更改html

我正在设计一个表单构建界面。 所有可用字段都位于界面左侧的无序列表中，右侧有一个大的空无序列表，它将成为我的webform。 使这个界面工作的“技巧”是将左侧的列表项转换为有效的html元素，方法是在将它们附加到右侧的可排序列表之前将html附加到droppable ui元素中。 我有它…大多数…使用draggable（）和sortable（）。 目前，我使用sortable的receive事件从draggable元素中获取id，我将其置于data（）块中以传递给update事件。 从那里，我使用id元素进行ajax调用，确定它是什么类型的字段以及应该从后端添加哪些选项，构建元素，然后使用ui.item.html将其放入界面中，这是更新函数传递的元素。 我的方法的问题是它在拖动元素时也会触发，这会导致选择元素在无意中附加到可排序列表时乱丢屏幕。 显然，receive事件是仅在sort从连接列表中获取项目时触发的事件。 但是，如果我尝试内部html ui.item元素，它会更改源列表，而不是所需的目标。 当项目已经在右侧的网络表单列表中时，如果它们只是被排序，我绝对不想修改它们。 有没有办法在连接的sortable()列表接收事件中访问和更改目标html？ 还有其他策略可以解决我的挑战吗？ 代码： Available Fields First Name Last Name Company Webform <input type="hidden" name="webform_id" id="webform_id" value="”> 和jQuery /***** Make webform fields draggable *****/ $( “.master_list li” ).draggable({ connectToSortable: “#webform_list”, helper: “clone”, revert: “invalid” }); /***** Make form elements sortable *****/ $( “#webform_list” ).sortable({ […]

Kendo Ui像windows桌面一样可以拖动

我需要模拟拖放桌面图标，我这样做： $(“.draggable”).kendoDraggable({ container: $(“#desktop”), hint: function() { return $(“.draggable”).clone(); }, dragend: function(e) { console.log(e); console.log(e.currentTarget.attr(“src”)); e.currentTarget.css(“top”,eylocation); e.currentTarget.css(“left”,exlocation); } }); 但我不确定是否是一个很好的方式和拖动回滚效果打破了我的解决方案。 Hava是一个使用KendoUI（No Jquery UI draggable）执行此操作的简单方法。 任何帮助！

如何在FileList中添加文件

请帮帮我： 更新： 在控制台日志中，它显示为合并但长度仍显示最后拖动的长度 我正在使用up_files = event.originalEvent.dataTransfer.files; 捕获在div中拖放的文件。 当用户第一次拖动文件时，所有文件都移动到up_files ，第二次如果再次将文件放入div中，我怎样才能将这些文件推送到现有数组列表而不是清除数组并插入upfiles #fileToUpload is a input file id #total is div id 示例代码： $( ‘#total’ ).bind( ‘dragover’,function(event) { event.stopPropagation(); event.preventDefault(); }); $( ‘#total’ ).bind( ‘drop’,function(event) { event.stopPropagation(); event.preventDefault(); if( upfiles == 0 ) { upfiles = event.originalEvent.dataTransfer.files; upfiles = Array.prototype.slice.call(upfiles, 0); } else { //push the file here […]

增强Jquery拖放演示

我有一个要求非常接近这个Jquery演示 ，这是一个简单的购物车演示。 基本上我需要对这个演示进行两个增强。 我需要一个文本输入以及可用的“产品”。 因此，当我拖放其中一个产品时，应该拖动文本字段，用户将在“购物车”字段中填写该文本字段。 我需要在购物车中的每个商品前面“十字”，可用于删除某个商品。 Jquery的“破坏”function似乎并没有这样做。 那么如何从购物车中删除商品呢？ 谢谢你的帮助。

jQuery – 拖动时停止hover事件

我正在创建一个拖放图像环境，如果将鼠标hover在图像上，会弹出一个小菜单。 如果单击并拖动图像，则可以对其进行重新排序。 我遇到的问题是，我希望在你拖动时禁用hover事件。 目前，如果您拖动图像，它会触发您hover在其他图像上的所有hover菜单。 $(‘ul.imglist li’).mousedown( function() { $(this).find(‘ul’) .fadeOut(100); }); // Image actions menu $(‘ul.imglist li’).hover( function() { $(this).find(‘ul’) .css(‘display’, ‘none’) .fadeIn(‘fast’) .css(‘display’, ‘block’); }, function() { $(this).find(‘ul’) .fadeOut(100); }); 我在这里有一些jQuery，底部hover事件是我想要在拖动时禁用的事件，顶部mousedown是当你点击图像时摆脱菜单。 我需要一些能够在移动鼠标的同时禁用hover的东西，同时按下按键（拖动）。 我尝试了一些没有运气的事情，是否有人有建议？

在嵌套的dataTable中拖放

我正在使用primeface 4.0。 primeface 展示仅显示如何将draggable到droppable 。 但是，从来没有提到过如何拖拽那个draggable拖车。 我想创建一个dataTable： 每个td都有一个droppable放置的面板，可以将多个draggable面板拉入和拉出 。 这个dataTable的“保存数据”的后bean对象，我假设如果dataTable是2 * 2，则后端bean中将有4个List，每个都存储相应droppable区域的draggable对象列表。 有点像p:schedule的简单版本，允许事件在单元格之间拖放。 我的努力： 我设法使一些function工作，就像拖入一个droppable 但我不能 删除拖动的draggable因为p:draggable没有ajax事件drag将数据传递给后端bean，因为我在p:droppable drop事件。（有一种方法可以使用JQuery draggable event start和stop将col和row num传递给后面的bean，但我不确定这是一个好方法去） 我不认为我的实现是正确的方法，因为有一些奇怪的错误 ，有时我从ddEvent.getData()获得的拖动对象不正确。 （我猜它与p:droppable的唯一dataSource有关。问题1469 ） 更新：我认为主要问题是p:droppable只绑定一个数据源，所以ddEvent.getData()总是从绑定数据源获取’对象’，我的问题是我有多个可放置区域，每个都需要绑定多个数据源 。 。 太糟糕了我无法发布截图… 这是我的代码：xthml：Shifts … 回豆： public List getDailyShift(String eid, Date date) { return this.tmpSchedule.getShifts(eid).get(date); } public void onShiftDrop(DragDropEvent ddEvent) { ShiftDto shift = ((ShiftDto) ddEvent.getData()); Date weekday […]

隐藏拖动预览 – HTML拖放

我在我的一个网站上有拖放function。 一旦你开始拖动我的一个可拖动的div，就会有一个拖动元素的透明预览。 这实际上是我的用户准确放置元素的方式，因为它们拖动的内容并不直接反映丢弃的内容。 有没有办法删除或更好地将拖动预览更改为其他图像？

jQuery的可拖动网格

看起来Draggable构造函数中的’grid’选项相对绑定到被拖动元素的原始坐标 – 所以简单地说，如果你有三个可拖动的div，它们的顶部分别相对于100,200,254像素相对给他们的父母： 当’grid’设置为[1,100]时，所有这些都被启用拖动： draggables = $(‘.draggable’); $.each(draggables, function(index, elem) { $(elem).draggable({ containment: $(‘#parent-div’), opacity: 0.7, revert: ‘invalid’, revertDuration: 300, grid: [1, 100], refreshPositions: true }); }); 这里的问题是，一旦你拖动div3 ，比如说，向下，它的顶部会增加100，将它移动到354px而不是仅仅增加46px （254 + 46 = 300），这将使它到达下一站在网格中 – 300px ，如果我们将parent-div视为参考点和“网格持有者”。 我查看了可拖动的源代码，它似乎是一个内置的缺陷 – 它们只是相对于可拖动元素的原始位置进行所有计算。 我想避免猴子修补可拖动库的代码，我真正想要的是如何使Draggable计算相对于包含父级的网格位置。 但是，如果猴子修补是不可避免的，我想我将不得不忍受它。

jQuery UI draggable不能处理新创建的DOM元素

我有一些DOM元素可以使用jQuery UI拖动。所有工作正常但是当我使用jQuery创建一些元素时，它们根本不可拖动。 即 $(‘div.draggable’).draggable(); //Existing element , it works 🙂 $(‘p.draggable’).draggable() ; //Newly created paragraph with same class name, it doesnt work at all 🙁 提前致谢 ！！！ 我正在尝试这个： $(document).ready(function(){ $(‘body’).append(‘Newly Created Paragraph’); $(‘p.draggable’).draggable(); **//This is not working** }); 但不知何故，这是有效的 $(document).ready(function(){ $(‘body’).append(‘Newly Created Paragraph’) .find(‘p.draggable’).draggable(); **This is working** });

如何在drop事件jquery上获取被删除项的id

当我把东西丢给jquery droppable时，我想得到丢弃的项目的id。 当我这样做时： $(“#here”).droppable({ tolerance: ‘fit’, accept: “.one”, drop: function(){ id = $(this).attr(“id”); alert (id); } }); 它当然在here提醒了droppable的id。 如何选择丢弃的div的id？