Tag: 拖放

可拖动和可放置图像时出错

我试图在3个可放置的图像上拖动2个图像。 当我在drop1上拖动第一个图像时,它会打印Drop11,类似于drag2和drag3,它会打印Drop12和Drop13。 当我拖动第二个图像时,它必须打印Drag21,Drag22和Drag23 resp。 一切正常,但是当我将第一张图像拖过任何一张可丢弃的图像时,它会打印它应该的内容。 但在那之后,如果我将第二个拖动图像拖到任何可拖动的图像上,它首先打印第一个droppale的消息,当我再次将它放在那里时,它会打印第二个droppable的消息(意味着它首先打印13个,如果拖动则打印23个)再次)。 它就是这样的。 我的代码有什么问题..? 我的代码是 jQuery UI Droppable – Default functionality #draggable1 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable1 { width: 150px; height: 150px; padding: 0.5em; […]

Laravel 4 – 改变物品的顺序

我在一个名为actividad_ficha的数据透视表中有两个表fichas和actividad_ficha 。 在这个数据透视表中,我创建了另一个名为orden_actividad列(用于缩短每个’ficha’中的’活动’)。 我有一个视图,我在其中显示与一个特定的’ficha’相关的所有“活动”。 我希望能够拖放我的’actividads’列表并自动保存新订单。 我在我的应用程序中使用了一些jQuery,但AJAX拒绝了我。 你知道我怎么能得到它? 或者你知道一些教程给我一些帮助吗?

是否有任何好的jQuery拖放文件上传插件?

是否有任何好的拖放jQuery插件,它提供与在Gmail中拖放附件相同的function? 我最好能够看到上传进度。 但我不想要闪光灯。 CSS,HTML5和jQuery首选。 谢谢。

在两个表之间拖放

我试图在两个表之间拖动n行。 第一个表有3列,第二个表有4列。 我有拖拉机工作。 我见过的所有例子一般都是在掉线位置附加的。 我想要做的是替换拖动行的内容并替换/更新删除位置中的单元格。 我在想是否可以编写一个新的tablerow(..),然后删除当前删除的行并将其替换为生成的行。 或者只是更新新位置的列。 (function ($) { $(document).ready(function () { var tb1 = $(“#table1 tr”); var tb2 = $(“#table2 tr”); tb1.draggable({ appendTo: “body”, helper: “clone”, opacity: “0.35”, revert: “invalid” }); tb2.droppable({ accept: ‘#table1 tr’, tolerance: “pointer”, drop: function (event, ui) { //loop through all items in the row var $col1, $col2; tb1.each(function […]

Jquery UI:当使用display none字段拖动一行时收缩表

我有一个隐藏字段的表。 当我尝试拖动一行隐藏一个字段时,所有表都缩小了。 我怎样才能解决这个问题? 带代码的刀片是这样的: ID Visible Nombre Header Home Orden Acciones 1 Yes TestingTesting Slug Order 1 id)}}” onsubmit=”return ConfirmarBorrar()”> Edit Delete 2 Yes Slug Order 2 id)}}” onsubmit=”return ConfirmarBorrar()”> Edit Delete 这里也是带有css代码的JSFiddle以及Jquery代码。 https://jsfiddle.net/w52m5ggb/16/

防止默认操作。 仅在chrome中工作

jQuery的: $(document).ready(function () { $(‘input[type=file]’).uploadImage(); jQuery.event.props.push(‘dataTransfer’); $(“.upload-cont”).bind(‘dragenter’, function (e) { $(“.upload-cont”).css(“border”, “1px dashed black;”); }); $(“.upload-cont”).bind(‘drop’, function (e) { var files = e.dataTransfer.files; e.preventDefault(); }); $(“body”).bind(‘drop’, function (e) { e.preventDefault(); }); }); 在Firefox 17,资源管理器8中,当一个文件从桌面拖放到浏览器时,图像将被加载到另一个页面中。 我添加了preventDefault(),它在chrome中完美运行。 可以做什么以便在ff中阻止动作,即浏览器。

同时拖动多个列表项

我有两个与jQuery UI sortable列表,允许将项目从一个列表拖动到另一个列表。 http://jsbin.com/uraga3 是否有一种简单的方法可以同时拖动多个项目 – 例如从左到右移动项目#3,#4和#7?

如何防止Bootstrap使拖动行的宽度发生变化?

我想有一个表允许我拖放以重新排序其中的行。 以下是Trevor和原作者提供的解决方案。 拖放时,表及其行的宽度会发生变化,以便对其行重新排序 这是jsfiddle演示 http://jsfiddle.net/trevordowdle/2Sg8v/ 但是,如果我将Bootstrap类“table”添加到表中,则拖动的行会缩小。 我尝试了很多方法来设置拖动行的宽度(由JQuery UI动态创建的行)并没有成功。 这是jsfiddle演示。 http://jsfiddle.net/mddc/8sRxL/1/ 这是添加Bootstrap css后唯一的更改(表类)。 有任何解决这个问题的方法吗? 虽然post的标题提到了Bootstrap,但它可能只是由100%的表格宽度引起的。 但是,由于我无法控制的设计,我需要100%的表格宽度。 谢谢。

从一个jquery Datatable拖动一行并将其拖放到另一个Datatable中

我试图从一个jquery Datatable中拖动一行或一组行,然后将其拖放到另一个Datatable中。 oTable = $(“#dragtable”).dataTable({ “aaData”: app_emp, “bProcessing”: true, “bDestroy”: true, “aoColumns”: [{ “mDataProp”: “employeeId” }, { “mDataProp”: “empName” }] }).rowReordering(); 我从ajax调用获取json并填充数据表如上所述。行重新排序function正常工作,我可以将行拖放到同一个数据表中 $(“#dragtable “).draggable({ helper: “clone”, }); 上面的代码是拖动整个表,如果我修改如下: $(“#dragtable tbody tr”)。draggable({helper:“clone”,}); 它只拖动Datatable的标题行而不是正文中的数据行。 我有以下代码将行放入另一个jquery数据表。 $(“#tobedroppedtable tbody tr”).droppable({}); 由于上面的代码不起作用,我需要拖放方面的帮助。

如何在fullcalendar上获取外部拖放事件的开始和结束日期

我有一个关于fullcalendars拖放function的快速问题。 这是我的JS代码 $(‘#calendar’).fullCalendar({ header: { left: ‘prev,next today’, right: ‘title’ }, editable: true, droppable: true, // this allows things to be dropped onto the calendar !!! drop: function(date, allDay) { // this function is called when something is dropped // retrieve the dropped element’s stored Event Object var originalEventObject = $(this).data(‘eventObject’); console.log(originalEventObject.title); // we need […]