Sam*_*Sam 6 html javascript jquery draggable
我正在开发我的第一个JQuery项目,而且我遇到了一些障碍.我正在尝试允许拖放重新排序一组嵌套列表(ul).除定位外,一切正常.目标是使可拖动的相对于光标垂直居中(水平移动受到限制),以便可以容易地丢弃具有嵌套在其中的元素的li.这是相关的JS:
$(function() {
$( ".organizerlink" ).draggable({ axis: "y",
containment:"#organizer",
scroll: false ,
helper: "original",
revert: "invalid",
cursorAt: { top: Math.round($(this).outerHeight() / 2)}
});
和HTML:
<ul id="organizer">
<li class="organizerTarget"> </li>
<li class="organizerlink" id="dbid-1">Page
<ul><li class="organizerTarget organizerNewParent"> </li></ul>
</li>
<li class="organizerTarget"> </li>
<li class="organizerlink" id="dbid-2">About
<ul>
<li class='organizerTarget'> </li>
<li class='organizerlink' id="dbid-3">Another Page<ul><li class="organizerTarget organizerNewParent"> </li></ul></li>
<li class='organizerTarget'> </li>
<li class='organizerlink' id="dbid-4">Example<ul><li class="organizerTarget organizerNewParent"> </li></ul></li>
</ul>
</li>
<li class="organizerTarget"> </li>
<li class="organizerlink" id="dbid-27">Stuff
<ul><li class="organizerTarget organizerNewParent"> </li></ul>
</li>
我已经尝试过的一些东西:
我知道outerHeight元素存在于jquery中,并且基于API文档,它似乎可以自动计算,即使CSS未定义,所以我认为这是正确的方法,也许是$(这只是寻找它的错误点.
我也想在我拿起它们之后将我的可拖动物体居中.我的解决方案
$(".dragme").draggable({
start: function(event, ui) {
$(this).draggable("option", "cursorAt", {
left: Math.floor(this.clientWidth / 2),
top: Math.floor(this.clientHeight / 2)
});
}
});
解决了最初的问题,请参阅我的初始帖子的评论.
编辑:
容差选项 "指针":鼠标指针与其他项重叠.
$(".sortable").sortable({
containment: "parent",
tolerance: "pointer"
});
如果draggable有辅助对象,这可以正常工作.只需将它放在draggable的start方法中,如下面的代码.
start: function(event, ui) {
$(this).draggable("option", "cursorAt", {
left: Math.floor(ui.helper.width() / 2),
top: Math.floor(ui.helper.height() / 2)
});
}
我只是花了几个小时把头撞在墙上试图可靠地完成这项工作,所以我想我会发布解决方案:)
问题: 在实例化动态值(即可变大小的可拖动代理的中心)期间,Draggable无法为"克隆"拖动设置cursorAt,因为还没有创建ui.helper!您可以在启动处理程序中设置它,但它不适用于第一次拖动.
解决方案: 将cursorAt设置为start,但也可以手动覆盖连续发生的拖动事件的ui.position.使用firstRun布尔值,可以防止它不必要地运行.您必须将默认cursorAt设置为左上角才能重新定位.
请享用!
$jobs.each( function( index, element ) {
var $el = $(element),
firstRun = true;
/*
* jQuery UI Draggable
* See @link: http://api.jqueryui.com/draggable/
*
* Note that for clone drags, the first drag cannot center the proxy because ui.helper hasn't been created yet
* so need to set it manually for first drag. Subsequent drags can use the cursorAt property.
* See my @link:
*/
$el.draggable({
cursorAt : [0, 0], // Set origin then update dynamically
drag : function( evt, ui ) { // Fires after start event, and continuously during drag
if ( firstRun ) {
// Reset proxy position here since cursorAt cannot be set for
ui.position.left -= Math.floor( ui.helper.width()/ 2 );
ui.position.top -= Math.floor( ui.helper.height()/ 2 );
};
},
helper : 'clone',
start : function( evt, ui ) { // Fires once
if ( firstRun ) {
// Center proxy relative to cursor for future drags
$(this).draggable( 'option', 'cursorAt', {
left : Math.floor( ui.helper.width()/ 2 ),
top : Math.floor( ui.helper.height()/ 2 )
});
};
// Set cursor ( 'cursor' option just applies style to <body> )
ui.helper.css( 'cursor', 'move' );
},
stop : function( evt, ui ) { // Fires once
if ( firstRun ) {
firstRun = false;
};
}
});
| 归档时间： |
|
| 查看次数： |
17035 次 |
| 最近记录： |