Tag: draggable

可拖动对象“粘合”到边框: 我创建了一个用户控件，在可拖动的div中包含一个标签，如下所示： .text_label { margin-top:8px; font-size:18px; color:#545454; -moz-border-radius: 2px; -webkit-border-radius: 2px; -border-radius: 2px; } .clear { clear:both; height:20px; } .drag { display:block; } 对于draggable，我在ready（）函数中使用以下选项： $(‘.drag’).draggable(“option”, “containment”, ‘parent’); 在我的测试网页上，我在面板中添加了两个用户控件。我的目标是让它们在该面板内可拖动。 .panel { border-style:solid; border-width:medium; width:100%; } 当我运行页面（在Chrome中）时，两个控件都对齐到面板的右边框，只能在Y轴上拖动。知道为什么会发生这种情况并且缺少什么？谢谢。

JqueryUI Draggable在IE中不起作用？: 我正在使用JQueryUI来帮助处理此页面上的可移动项目： http://www.hiredavewaring.com 如果你向下滚动，你会看到你可以抓住并移动到我脸上的png，以创建一个Mr. PotatoHead类型的效果。我知道它不是世界上最漂亮的代码，但除了Internet Explorer之外，它在每个浏览器上都运行良好。有没有人知道帮助这些项目在IE中变得可拖动的修复程序？这是没有Google Analytics或Meta的代码： Home About Portfolio Contact Blog Grafiti Time! Click on an image below and drag it over Dave’s face. Send us a screen shot of your favorite combination. Click Here to reset and start over. $(function(){ $(‘.demo’) .draggable(); }); $(function(){ $(‘.demo2’) .draggable(); }); $(function(){ $(‘.demo3’) .draggable(); }); […]

访问WordPress的TinyMCE iFrame: 使用jQuery我试图操纵WordPress内容编辑器，它在iframe中使用TinyMCE。我似乎无法使以下代码按预期工作： jQuery(document).ready(function($) { $(‘#content_ifr’).ready(function() { $(‘#content_ifr’).contents().find(‘body’).css(‘background-color’, ‘#f33’); }); 无论我使用“.ready（）”还是“.load（）”，事件都会在TinyMCE编辑器（iframe的主体）完全加载之前触发。但是，如果我在手动单击标题文本框以触发click事件之前等待iframe加载，则以下代码将起作用： jQuery(document).ready(function($) { $(‘#title’).click(function() { $(‘#content_ifr’).contents().find(‘body’).css(‘background-color’, ‘#f33’); }); 我已经详尽地搜索了jQuery和iFrames这个主题，看起来根据具体情况来看，这是一个打击或错过。有些代码适用于某些人，而不适用于其他人。有没有人知道在TinyMCE iframe主体完全加载后获取第一个代码片段的方法？因为它只是WordPress内容编辑器，所以iframe内容位于同一个域中。我真正想做的是通过.addClass（）向iframe中的body元素添加一个类 jQuery(document).ready(function($) { $(‘#content_ifr’).ready(function() { $(‘#content_ifr’).contents().find(‘body’).addClass(‘ui-droppable’); }); 这样我就可以在以下教程中应用drag n’drop代码： jQuery Example: Inserting text with drag n’ drop

resize时可拖动对象背景图像的大小: 这个问题与jquery中的Resizable，draggable对象有关。可能？大家好，我想在jquery resize上调整div的背景图像。我该怎么做？谢谢

replaceWith和jQuery draggable drop？: 我想知道为什么 $(‘#title’).replaceWith(‘ha’); 将在外面工作 drop: function(event, ui) {} jquery的droppable脚本中的区域，但它不能在里面工作。具体来说，如果我这样做 $(“.droppable”).droppable({ drop: function(event, ui) { $(‘#title’).replaceWith(‘ha’); } 我得到一个Runtime Error (line 1102) data(…).options is null or not an object 。如果我插入$(‘#title’).append(‘ha’); 在drop：里面，它有效。但是如果我把$(‘#title’).replaceWith(‘ha’); 外面的任何地方 $(“.droppable”).droppable({ /* */ }); 有用？

使用draggables和resizables删除Jquery div: 我有一个问题：当你把一个div作为可拖动和可resize的时候，以后当你想删除时，我需要破坏可拖动和可resize的？ droppables也是如此。例： $(“element”).draggable(“destroy”).resizable(“destroy”).remove(); 或者只需要？： $(“element”).remove(); 当你想要替换具有draggables元素的div的html时： $(“.parent .elements”).draggable(“destroy”).resizable(“destroy”).parent().html(newHtml).find(“.newsElements”).draggable().resizable(); 或者只需要？： $(“.parent”).html(newHtml).find(“.newsElements”).draggable().resizable(); 谢谢。

当按下换档时，JS限制鼠标移动轴（对于可拖动元素）: 当按下换档按钮时，我希望用户只能向上/向下或向左/向右移动鼠标。我目前的粗略想法是在按下换档时拦截所有动作，并使用事件模拟来进一步传递所需的事件（仅包含所需的轴移动）。我使用jQuery Draggable，所以其他想法是确定何时按下shift并限制draggable本身但这可能需要调查可拖动的代码并且可能是耗时的。任何想法如何以更优雅的方式做到这一点？

FullCalendar按ID删除外部事件: 我正在使用FullCalendar和jQuery UI将“Days Off”拖动到我的日历上作为背景事件。由于您无法在FullCalendar中单击后台事件，因此我创建了一个列表，其中包含我的rest日以及旁边的“删除”按钮，其中事件ID为数据属性。但是，当我单击“删除”按钮时，即使它具有正确的ID，也不会删除该事件。请看看这个jsFiddle： https ：//jsfiddle.net/aaroncadrian/odhL964L/ 为了向您显示事件ID已正确更新，我删除了事件的背景渲染，以便您可以单击该事件以显示其ID。您还可以在按钮及其data-id属性中查看事件ID。以下是删除事件的代码，但不起作用。 $(‘.remove’).click(function(){ // Get the ID for the event from the button var id = $(this).data(‘id’); // Remove the event. **DOES NOT WORK** $(‘#calendar’).fullCalendar(‘removeEvents’, id); }); 你能告诉我如何通过点击相应的按钮删除活动吗？同样，理想情况下，我希望将这些被拖动的事件渲染为背景事件。 UPDATE 我在加载时向页面添加了一个事件及其相应的按钮，并且在页面加载时呈现事件后，删除事件的function起作用。那么我需要采取哪些不同的做法，以便删除到日历上的外部事件可以以相同的方式删除？

在jquery中拖动元素时显示自定义图像: 我正在使用JQuery UI来拖放树节点并且工作正常。我需要根据更多的用户交互来即兴表达。当我拖动任何元素时它显示相同的元素名称，你可以在图像中看到（测试3我已经拖到了下面）。但我的要求是当我拖动任何树节点时，它应该显示指定的图像，而不是相同的文本。可能吗？我的可拖动function如下，我需要做些什么改变才能达到要求。 $(“li a”).draggable({ revert: “invalid”, containment: “document”, helper: “clone”, cursor: “move”, start: function(event, ui) { var draggedId = event.target.id; } });

jQuery draggable（’cancel’）导致错误：this.helper为null: 我有一个jQuery draggable（）滑块，我想在某个事件中取消，但这会导致错误：’this.helper为null’。代码很简单： $( ‘#magicalscrollhandle’ ).draggable( ‘cancel’ ); 有任何想法吗？