Tag: jquery ui draggable

Jquery拖放表格单元格并获取其保存位置

这里我有以下html，因为它基本上匹配以下概念，我需要能够拖放AnswerSide单元格。 只有答案边细胞可以让我上下移动。 移动后，我们需要得到答案的文本及其位置。 （正如我在asp.net中所做的那样，表格将在代码后面生成。） 用户可以在答案中上下移动。 （ 只能移动答案 ） 我们需要检索文本及其位置 我们需要将其保存在DB中 任何人都可以告诉我如何做到这一点。 我试过Jquery Ui sortables ，因为我没有得到它。 因为我是初学者，任何人都可以帮助我解决问题。 我使用HtmlTable和Div Layout进行了更新，但现在任何人都可以帮助我以任何方式解决问题 用于以下HTML的JSFIDDLE链接 Div布局的Jsfiddle QuestionSide Answer Side Question 1 Ans1 // this div is needed to question 2 Ans2 question 3 Ans3 question 4 Ans4 question 5 Ans5

Jquery ui，draggable containment parent + rectangle？

我希望有一个包含在其父级中的可拖动，然后我想进一步限制它以保持在父级中的某个矩形内： item.draggable({containment:”parent”,axis:”x”,handle:item.children()}); item.draggable(‘option’,’containment’) “parent” item.draggable(‘option’,’containment’,[0,0,250,0]); item.draggable(‘option’,’containment’) [0,0,250,0] 我希望它同时是“父”和[0,0,250,0]，但问题是，一旦我设置了包含选项，它就会忘记我用它创建的父包含。 当它忘记父项时，矩形是相对于文档计算的，而父项通常不位于x = 0。 编辑：好的，所以我解决了问题，但我仍然需要一些输入，因为这是非常奇怪的行为。 当我初始化draggable时，containment选项被设置为字符串“parent”，那么如果我将它设置为其他东西，它将是其他东西，它将忘记父级。 但是，如果我先拖动draggable然后将其设置为其他东西，则item.draggable（’option’，’containment’）将输出一个dom元素，因此显然“父”被处理成其他东西。 然后，如果我在第一次拖动项目之后将包含选项设置为其他内容，即使包含设置为矩形，它也将保持包含在父项中，这解决了我的问题。 现在我想知道这是一个错误还是设计问题，不应该更好地记录这种行为吗？ 有谁在那里？ #slowtuesday

jQuery .on（’click’）不适用于jQuery UI draggable

我有一个关于jQuery的问题。 我真的很喜欢jQuery，甚至是javascript，所以请耐心等待。 我在我的应用程序中的某些div上使用jQuery UI draggable。 问题是，jQuery .on（’click’）似乎不适用于这些div。 我确实尝试使用.click（），它确实有效。 但是，div将动态创建，并且基于我所学到的，当我们想要使用动态创建的元素时，最好使用.on（）。 以下是我的HTML代码段： First text Second text 这是jQuery片段： $(‘div.draggable-text’).draggable({ cursor: ‘move’, delay: 200, containment: ‘parent’ }).resizable().selectable(); // This one doesn’t work $(‘div.book-page’).on(‘click’, ‘div.book-page > div.draggable-text’, function () { alert(‘clicked!’); // some more coding here… }); // This one works /*$(‘div.book-page > div.draggable-text’).click(function () { alert(‘clicked!’); // some more […]

限制jQuery-ui Draggable仅在给定区域内向上拖动

我有一个固定位置的图像，我用CSS制作动画，当用户滚动时向下移动屏幕边缘。 – 效果很好。 当图像到达屏幕底部时，用户可以点击它并将其动画回到顶部。 – 也运作良好。 我也试图让用户使用jQuery-ui Draggable将其拖动到顶部。 – 这里出现了并发症。 我需要将图像向上拖动，从不向下，所以我通过移动带有可拖动图像的包含包装来限制我的可拖动元素仅向上拖动。 我还在页面顶部完全限制拖动，以防止图像被拖到页面顶部之外。 在大多数情况下，这在Firefox中运行良好，但我在Webkit浏览器中遇到问题，当用户第一次开始拖动它时，可拖动图像“跳起来”。 我也有问题让这种效果在不同的屏幕尺寸上运行良好，因为我正在使用顶部和底部位置调整。 的jsfiddle // repel down animation var previousScroll = 0; var scroll = function () { var currentScroll = $(this).scrollTop(); var z = $(window).scrollTop(); if (currentScroll > previousScroll && $(‘#repel’).css(‘top’) > ‘-400px’) { //down scroll code $(“#repel”).removeClass(“climb”); $(“#repel”).addClass(“repel”).delay(400).css(‘top’, ‘+=2%’); } if (currentScroll […]

jQuery resize（）事件在可拖动时不起作用

我试图使用jQuery将“Draggable”变成DIV（id = sortable），但它不能正常工作“Resize”。 可拖动“将我拖下来”DIV进入DIV（id = sortable） Draggable在DIV中正常工作（id = sortable） 可resize在DIV内不起作用（id = sortable） 有谁知道我做错了什么？ 脚本和HTML $(function() { $(“#sortable”).sortable({ revert: true }); $(“#draggable”).draggable({ connectToSortable: “#sortable”, helper: “clone”, revert: “invalid” }); $(‘.resizemove’).resizable(); }); Drag me down One Two Three Four 这是JsFiddle

如何正确拖动jqgrid编辑表单？

当我拖动编辑表单时，表单的位置无效。 始终从位置(0,0)到窗口。 它的位置与鼠标光标位置无关。 我怎样才能解决这个问题？ 这些是我的代码。 $(“#jqGrid”).jqGrid({ url: url, mtype: “GET”, postData: data, datatype: “jsonp”, colModel: [ { label: ‘d_id’, name: ‘d_id’, width: 15, key: true, hidden: true}, { label: ‘driver’, name: ‘d_name’, width: 30, align:”center”, editable: true, editoptions: {size: 40} }, { label: ‘phone’, name: ‘d_phone’, width: 30, align:”center”, editable: true, editoptions: {size: 40} }, […]

被拖动的Jquery draggable show qtip

我想在拖动元素时显示元素，并在元素被删除/恢复时隐藏它。 我正在使用qtip2作为工具提示 我的代码： $(“.noDrop”).qtip({ content: “You cannot drop this item”, show: “mousedown”, position: { target: ‘mouse’, viewport: $(window) // Keep it on-screen at all times if possible }, hide: { fixed: true, // Helps to prevent the tooltip from hiding ocassionally when tracking! event: ‘mouseup’ } }); 这是小提琴： http ： //jsfiddle.net/e6dJq/ 单击元素时我可以看到工具提示，但一旦拖动开始就会隐藏它。 因为创建了克隆并且元素失去焦点。 在释放鼠标单击之前，我无法保持工具提示可见。 请帮忙。

jQuery UI：可排序和可拖动+可排序和可放置

我有两个清单。 它们是可排序的但没有连接（列表“one”的元素不能与列表“two”的元素混合） 我希望列表“one”的元素可以删除，列表“two”的元素可以拖动，因为我想将列表“two”的元素拖放到列表“one”中。 我应该怎么做？ 编辑： 我试图让问题尽可能一般，但也许我应该更清楚……对不起。 列表一的元素是“类别”，它们应该是可排序的。 列表2的元素是“链接”，应该是可排序的。 链接只属于一个类别。 我想将一个链接从一个categerory移动到另一个，我很想使用JQuery Ui。

可拖动对象“粘合”到边框

我创建了一个用户控件，在可拖动的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(); }); […]