Tag: 拖放

jQuery：如何在代码中模拟拖放？: 编辑：这是一个链接，向您展示我的示例代码： http ： //www.singingeels.com/jqtest/ 我有一个非常简单的页面，它引用了jquery-1.3.2.js，ui.core.js（最新版本）和ui.draggable.js（也是最新版本）。我有一个div，我可以很容易地拖动（当然使用鼠标）： hello 然后在JavaScript中： $(“#myDiv”).draggable(); 这是完美的。但是，我需要能够仅使用代码来模拟“拖放”。我主要使用它，但问题是触发的事件是占位符事件。如果你打开“ui.core.js”并滚动到底部…你会看到： // These are placeholder methods, to be overriden by extending plugin _mouseStart: function(event) { }, _mouseDrag: function(event) { }, _mouseStop: function(event) { }, _mouseCapture: function(event) { return true; } 为什么在我的模拟中没有正确地扩展事件，但是当你用鼠标点击它们时，它们是？ – 关于如何强制_mouseDrag：属性服从“ui.draggable.js”中的覆盖扩展的任何想法？解决这个问题将是巨大的 – 我计划在以后显示主要的好处。谢谢，-Timothy 编辑：这是一个链接，向您展示我的示例代码： http ： //www.singingeels.com/jqtest/ 编辑2：点击上面的链接和查看源…你会看到我正在尝试做什么。 […]

如何在不同选项卡之间拖放多个元素: 我试图在不同的选项卡之间拖放多个元素。在这个jsfiddle中，当一个项目被拖动时，我想拖动所有其他选中的项目，就像Gmail将多个电子邮件从inbox移动到另一个文件夹时一样。我认为有必要使用ui.helper但我没有足够的查询技巧。以下是我目前正在使用的代码： $( “#sortable1, #sortable2” ).sortable().disableSelection(); var $tabs = $( “#tabs” ).tabs(); var $tab_items = $( “ul:first li”, $tabs ).droppable({ accept: “.connectedSortable li”, hoverClass: “ui-state-hover”, drop: function( event, ui ) { var $item = $( this ); var $list = $( $item.find( “a” ).attr( “href” ) ) .find( “.connectedSortable” ); ui.draggable.hide( “slow”, […]

Html5拖放svg元素: 我想在这里按照html5拖放教程。我无法在rect元素上注册dragstart事件。如果我将事件从draggable更改为mousedown则调用handleDragStart处理程序。请忽略代码中的其他空白注册。 JSFiddle 在这里 svg rect { cursor: move; } SVG/HTML 5 Example loc.js $(document).ready(function() { function handleDragStart(e) { log(“handleDragStart”); this.style.opacity = ‘0.4’; // this ==> e.target is the source node. }; var registercb = function () { $(“#cvs > rect”).each(function() { $(this).attr(‘draggable’, ‘true’); }); $(“#cvs > rect”).bind(‘dragstart’, handleDragStart); $(window).mousedown(function (e) { }); […]

jQuery可以使用动画进行排序: 我正在使用jQuery和Sortable来安排我的项目列表（以及这个http://dragsort.codeplex.com ）。一切都很完美。我正在使用dragEnd上的函数按dragEnd排列列表。这是我的代码： $(“#list1, #list2”).dragsort({ dragSelector: “div”, dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: “” }); function saveOrder() { var data = $(“#list1 li”).map(function() { return $(this).children().html(); }).get(); $(“input[name=list1SortOrder]”).val(data.join(“|”)); }; 我的问题：无论如何我在拖动时可以动画吗？或拖动时重新定位元素？我只需要它在Safari上工作。一个例子是：看看拖放（0:30），你会看到我在说什么。谢谢。

html5拖放FOR MOBILE: 我在w3schools上发现这个代码用于拖放，它可以在桌面上运行，但不适用于移动设备。我需要修改什么才能识别触摸？ #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData(“Text”,ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData(“Text”); ev.target.appendChild(document.getElementById(data)); } Drag the W3Schools image into the rectangle:

处理重叠的jQuery可排序列表: 这是一个不起眼的问题，但是我正在使用jQuery Sortables并试图让两个连接列表在一个fixed位置时很好地协同工作。一切正常，直到你滚动页面，使两个列表最终位于彼此的顶部。然后列表似乎对哪一个应该接收被拖动的项目感到困惑，这意味着当每个列表中出现/消失时会发生一堆抖动。看起来问题是两个列表都处理鼠标/排序事件，因为被拖动的项目在技术上是在两个列表上，但我想要的是使覆盖列表（即position: fixed ）吞下事件，以便底层主列表不会尝试接收该项目。这是最小的代码示例： ul { list-style-type: none; padding: 0; float: left; } li { margin: 5px; padding: 5px; width: 500px; border: solid 1px #F00; background-color: #FFF; } #overlayed { position: fixed; top: 0; background-color: #000; margin: 20px; padding: 10px; } #overlayed li { width: 50px; float: left; } $(function() { […]

拖动/删除元素在列表中的位置（ui.sortable）: 我有一个像这样的可排序列表： http ： //jqueryui.com/demos/sortable 是否有可能在列表移动时获取元素的开始和结束位置？我在谈论他们的位置编号，在列表中。例如，如果我将元素2移动到列表中的位置5，我想将这两个数字分配给变量。我是jQuery的新手 – 任何帮助都会非常感激。

如果在此div之外和其他draggables内部，则可拖动恢复（使用无效和有效的恢复选项）: 在ui draggables（ http://jqueryui.com/demos/droppable/#revert ）上可以恢复一个div，如果它在一个div内，如果不在另一个div内？比如这样 $( “#draggable” ).draggable({ revert: “valid”, revert:”invalid” }); 但由于显而易见的原因，这不起作用..我可以这样做吗？…当它在这个可放置的内部而不是在那个可放置的内部时？

如何获得可拖动对象的位置: 我正在尝试使用JQuery获取可拖动对象的x和y。场景是，我将一个对象拖放到另一个对象上，并希望得到拖放对象的位置。编辑：现在我可以获得对象的位置，但我需要更多：这是我尝试过的; $(function() { $(‘#draggable’).draggable( { drag: function() { var offset = $(this).offset(); var xPos = offset.left; var yPos = offset.top; $(this).text(‘x: ‘ + xPos + ‘y: ‘ + yPos); } }); $(“#droppable”).droppable({ drop: function(event, ui) { $(this) .addClass(“ui-state-highlight”) .find(“p”) .html(“Dropped!”); } }); }); 现在我可以获得可拖动对象的位置，但我需要它可以resize，除了获得可拖动的x，y之外，我还需要它的大小。任何帮助都会很棒！谢谢。