function makeResourceDrag(arrIndexID) {
$('#imgA' + arrIndexID).resizable();
$('#imgA' + arrIndexID).draggable({
start: function(event, ui) {
isDraggingMedia = true;
},
stop: function(event, ui) {
isDraggingMedia = false;
// Set new x and y
resourceData[arrIndexID][4] = Math.round($('#imgA' + arrIndexID).position().left / currentScale);
resourceData[arrIndexID][5] = Math.round($('#imgA' + arrIndexID).position().top / currentScale);
}
});
}
如果可以调整可调整行,这可以正常工作,但我希望这些图像可以拖动和调整大小,如果我尝试使相同的元素具有这两个属性,我会得到有趣的行为,有没有人知道如何使这个工作？
谢谢!
我有一个div包含一些jquery draggables,但是如果在任何时候我从页面中删除其中一个draggables然后这可以移动其余的,因为它们与相对位置.
这是一个小提琴展示:http: //jsfiddle.net/VolatileStorm/aNk6e/
我提出的解决方案是,draggable应该使用绝对而不是相对定位,但是我找不到这样做的方法.有没有办法做到这一点,如果没有,任何人都可以想办法吗？(为了优雅,我不接受"不要删除其他可拖动的").
当我使用draggables + sortables放置在浮动的,相对定位的父元素时,我遇到了一个问题,即可拖动的助手被错误地偏移了.浮动父元素是Bootstrap列,其中多个可排序列表放在一列中,而可拖动列表放在另一列中.
这是一个工作示例代码段
$('.sortable').sortable({
connectWith: '.sortable',
revert: 600,
forcePlaceholderSize: true,
placeholder: 'ui-sortable-placeholder',
tolerance: 'pointer'
}).disableSelection();
$('.draggable').draggable({
connectToSortable: '.sortable',
helper: 'clone',
revert: true
}).disableSelection();.sortable-container {
display: inline-block;
width: 100px;
vertical-align: top;
}
.sortable {
cursor: move;
margin: 0;
padding: 0;
list-style-type: none;
vertical-align: top;
border: 1px solid #000;
}
.ui-sortable-placeholder {
background: #ff0000;
}
#draggables {
margin: 0;
padding: 0;
list-style-type: none;
}
.draggable {
margin: 4px;
cursor: move;
color: #fff;
background: #5dd1ff;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" …css jquery-ui jquery-ui-sortable jquery-ui-draggable twitter-bootstrap-3
我正在更新/调试和扩展我的可拖动脚本的功能,我需要能够实现以下结果:
whatever.onRightMouseButtonMousedown = preventDefault();
我做了很多研究无济于事,但是,我知道有可能这样做,因为当我使用jquery-ui draggable时,它会阻止你用鼠标右键拖动时拖动元素的能力.我想模仿这种能力,并了解它是如何工作的,这样我就可以根据需要现在和将来实施它.
注意:请不要向我提供有关如何使用jquery或jquery-ui draggable的信息(我已经熟悉它),我想了解它们是如何实现的,或者如何实现对mousedown的检测是否正确鼠标按钮,以便我可以用鼠标右键阻止元素被拖动.
javascript right-click draggable mouseevent jquery-ui-draggable
jQUery UI draggables名为的样本Default说:
在任何DOM元素上启用可拖动功能.
但是我无法让它们在buttons元素上运行.
我将Default示例修改为如下所示:
我刚刚将div元素更改为按钮1 type="button":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<button type="button" id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</button>
<div class="demo-description">
<p>Enable draggable functionality on …我正在使用JQuery库来实现拖放.
当它被放入可排序列表时,如何获取被拖动的元素？
我想得到被拖动的div的id.拖动以下元素:
<div class="control" id="control[1]" >
<img src="img/controls/textfield.png" />
</div>
我有他们的例子中的标准拖动功能
$(".control").draggable({
connectToSortable: '#sortable',
helper: 'clone'
});
拖动部分中的函数停止,下一个代码返回正确的值
stop: function(event, ui) {
alert(ui.helper.attr('id'));
}
这是可排序的元素:
<ul id="sortable"><li>test</li></ul>
和他的功能:
$("#sortable").sortable({
revert: true,
accept: '.control',
receive: function(event, ui) {
// here i need to get draggable element id
}
});
我尝试了各种ui.id等似乎不起作用.
receive: function(event, ui) {
$(ui.draggable).attr("id")
}
抛出undefined.
更新:
对不起,我的错:)我母亲常说 - "编码前读取API".ui.item.attr('id')工作良好.
我正在使用JQuery的draggable(); 使li元素可拖动.唯一的问题是当元素被拖到其父元素之外时,它不会显示出来.也就是说,它不会留下其父div的范围.一个例子是在这里:http://imgur.com/N2N1L.png -就好像在z-index的其他一切具有更大的优先级(和下的一切元素幻灯片).
这是代码:
$('.photoList li').draggable({
distance: 20,
snap: theVoteBar,
revert: true,
containment: 'document'
});
并且li元素放在DIV中,如下所示:
<div class="coda-slider preload" id="coda-slider-1">
<div class="panel">
<div class="panel-wrapper">
<h2 class="title" style="display:none;">Page 1</h2>
<ul class="photoList">
<li>
<img class="ui-widget-content" src="photos/1.jpg" style="width:100px;height:100px;" />
</li>
</ul>
</div>
</div>
我很肯定问题是它不会离开它的父容器,但我不知道如何做到这一点.
任何方向或帮助将非常感谢!
我有一个jQuery UI可拖动,我试图创建一个自定义帮助器,其中包含原始元素的一些但不是所有信息.
这是我的可拖动元素;
<ul>
<li><div>Name</div> <span>12-12-2011</span></li>
<li><div>Another name</div> <span>12-12-2011</span></li>
</ul>
和jQuery;
$("ul li").draggable(function(){
helper: function(){
return $("<div></div>");
}
});
我们的想法是,在拖动时,用户将拥有一个只包含名称但不包含时间元素的帮助程序.
我的实际代码比这更复杂,所以我真正想要的是任何选择器,它允许我选择原始元素或它的副本,然后在其上做各种jQuery魔术(过滤元素,添加新元素,类等)
然而,对于我的生活,我找不到这个,可拖得糟透的文件,#jquery没有人会帮助我.有任何想法吗？
提前致谢!
我使用jQuery UI Draggable/Sortable演示(http://jqueryui.com/demos/draggable/#sortable)作为我项目的基础.<li>当sortable收到它时,我需要获得一个被克隆到sortable中的引用.我尝试了sortable的receive事件,但是它只提供了对原始draggable的引用<li>,而不是它的克隆.
我有一些麻烦让jquery-ui可以拖延工作.我将与您分享我的解决方案,这是最好的解决方案吗？
在开始我的实际工作之前,我只是插入它进行测试.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
和
$('img').draggable();
喜欢这里:http://jsbin.com/eqowet/2/
但是我收到了一个错误:
错误:未捕获的TypeError:无法读取未定义的属性"msie".
jquery-ui ×8
jquery ×6
javascript ×2
button ×1
css ×1
draggable ×1
mouseevent ×1
right-click ×1