标签: jquery-ui-draggable

我正在使用一些可拖动的元素,这些元素应该捕捉到其他元素,这些元素都有类,类似于,".classes"也是唯一的id "#class_id".一旦拖动完成了可拖动元素,我想找出可拖动元素捕捉到的那些".classes"中的哪一个.

我想我可以根据拖动元素的当前位置来计算最接近的元素,但我觉得应该有比蛮力更容易的方法,因为jQuery必须保留某种变量以确保捕捉有效.

有什么建议？谢谢!

这是它的样子;

$( "#box ul li" ).draggable({
    helper: "clone"
});
$( ".item" ).draggable({containment: ".door"});

$( ".door" ).droppable({
    accept: ":not(.ui-sortable-helper, .item)",
    drop: function( event, ui ) {
       $( "<div class='item'></div>" ).html(ui.draggable.find("img")).appendTo(this);
    }
});

用户拖动$("#box ul li")元素并将其放在$(".door")元素上.它将它附加到带有$(".item")选择器的$(".door")元素.

我正在使用jquery UI - Draggable来拖放项目.那里没有问题.

这是实际的问题;

但是当你开始拖动元素时,函数会改变元素的左侧和顶部位置,如; 上图:10px左:10px.但我想将基于百分比的项目拖到包含元素.它应该是 最高的:10%; 左:10%.

关于如何做到这一点的任何想法？

我正在研究如何在Google Docs Drawing中移动框时显示指南.在开始编写自己的代码之前,我更喜欢开源代码或任何类型的指南.

1. 我不需要跨多个浏览器窗口拖放,所以我不需要HTML5 Drag-n-Drop.
2. 我也使用jquery-ui-draggable for boxes.

我尝试使用谷歌搜索并无法找到它,但我认为这是一个相当简单的任务.http:// jsfiddle我试图摆脱恢复动画(NB我想保留恢复动作,只是想删除它还原的动画)当你从左侧向右侧放下时:http:// jsfiddle .NET/2fsVZ /

这是我正在寻找的长短不一之处:

下面是我正在使用的JavaScript - 如何告诉它不为恢复设置动画？

  $( ".before .left-side>div" ).draggable({ revert: true});

我可以很容易地使<div>元素可拖动,但不是<button>元素.我怎样才能制作<button>可拖动的？

$(init);

function init() {
  $('#makeMeDraggable1').draggable();
  $('#makeMeDraggable2').draggable();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>

<div id="makeMeDraggable1">Drag me!</div>
<button id="makeMeDraggable1">Drag me!</button>

查看JSFiddle

jQuery UI Draggable交互有一个很好的属性,可以将包含设置为父包含.

$( ".selector" ).draggable({ containment: 'parent' });

我希望将收容设置为父母的父母.没有字符串值可以实现这一点,因为字符串是选项

'parent','document','window',[x1,y1,x2,y2]

我可以在页面加载时计算父级父级的x1,y1,x2,y2,并使用这些值来设置容器相对于文档的边界.但是,如果在页面加载后调整窗口大小,则容器位置可以相对于父级的父位置进行更改.无论窗口大小调整,本机"父"选项都将可拖动元素保留在父元素中.

有没有办法使用父母的父母完成这个可拖动的收容？.

在ui draggables(http://jqueryui.com/demos/droppable/#revert)上可以恢复一个div,如果它在一个div内,如果不在另一个div内？比如这样

$( "#draggable" ).draggable({ revert: "valid", revert:"invalid" });

但由于显而易见的原因,这不会起作用..我可以这样做吗？...当它在这个可放置的内部而不是在那个可放置的内部时？

我想用Jquery的draggable来实现轻松的效果.但我没有在这个插件中找到该选项.所以我想知道是否有其他插件有这个选项 - 或一个简单的解决方案.

我试图实现的效果是这样的:http://www.fileden.com/files/2009/6/4/2466215/dragease.swf

正如您所看到的,在拖动时,由于缓和,图像移动感觉更平滑.我还想将拖动约束到一个轴,还需要使其恢复到它的位置.JQuery的draggable确实有最后两个选项,所以这很好.

示例代码已经为我提供了我想要的东西(除了缓动):http://jsfiddle.net/dandoen/NJwER/1/

任何建议将不胜感激.

干杯,丹多恩

我正在使用jQuery和JQuery ui做一些小应用程序.

我已经定义了一个可拖动的div,它工作得很好,但我想在点击一个按钮时设置div的位置......

我在这里阅读stackOverflow来做到这一点:

element.position().top = topUserDefined;
element.position().left = leftUserDefined;

我在这个赋值之前和之后做了一个关于element.position().top的警告,并且没有分配它的新值,它保留了原始值...

任何的想法？？？谢谢!

我想在我的网页上有两个部分,可以向左或向右拖动:

<style>
#sortableitem {
    width: 100px;
    height: 70px;
    float:left;
    list-style-type: none;
}
.content {
    background:lightgrey;
}
.header {
    background:grey;
}
<style>

<ul id='sortable'>
<li id='sortableitem'>
    <div class='header'>ITEM 1</div>
    <div class='content'>Content here</div>
</li>
<li id='sortableitem'>
    <div class='header'>ITEM 2</div>
    <div class='content'>Content here</div>
</li>
</ul>

<script>
$(document).ready(function () {
    $("#sortable").sortable();
});
</script>

这是在这里工作:http://jsfiddle.net/gTUSw/

但是,我只想使用标题部分进行拖动.我有想要选择的内容.

我如何让它工作,以便我可以通过标题拖动,但仍然可以正常控制内容区域中的鼠标事件？