模拟双击拖动结束 - jquery UI
Similate double click on drag end - jquery UI
这里有一个两列的表格。在第一个是可拖动的div对象,所以:
$(function() {
$( "div.available" ).draggable({
snap: "div.timeline-axis-grid"
});
});
第二列是基于谷歌可视化API的时间线表。http://jsbin.com/oLaqoToH/5
您将看到双击时间轴表,然后在时间轴中创建一个新的div 对象。
现在我想模拟当我结束将对象从第一列拖动到时间线时双击。如此简单,我想用这个小技巧将一个div 对象从第一列添加到时间线。有什么办法可以做到这一点吗?这是否可能与jquery一起使用?如何模拟可拖动结局的点击?
更新:我不需要模拟双 clikc 因为此操作具有以下功能:
http://almende.github.io/chap-links-library/js/timeline/timeline.js
/**
* Double click event occurred for an item
* @param {Event} event
*/
links.Timeline.prototype.onDblClick = function (event) {
var params = this.eventParams,
options = this.options,
dom = this.dom,
size = this.size;
event = event || window.event;
if (params.itemIndex != undefined) {
var item = this.items[params.itemIndex];
if (item && this.isEditable(item)) {
// fire the edit event
this.trigger('edit');
}
}
else {
if (options.editable) {
// create a new item
// get mouse position
params.mouseX = links.Timeline.getPageX(event);
params.mouseY = links.Timeline.getPageY(event);
var x = params.mouseX - links.Timeline.getAbsoluteLeft(dom.content);
var y = params.mouseY - links.Timeline.getAbsoluteTop(dom.content);
// create a new event at the current mouse position
var xstart = this.screenToTime(x);
var xend = this.screenToTime(x + size.frameWidth / 10); // add 10% of timeline width
if (options.snapEvents) {
this.step.snap(xstart);
this.step.snap(xend);
}
var content = options.NEW;
var group = this.getGroupFromHeight(y); // (group may be undefined)
var preventRender = true;
this.addItem({
'start': xstart,
'end': xend,
'content': content,
'group': this.getGroupName(group)
}, preventRender);
params.itemIndex = (this.items.length - 1);
this.selectItem(params.itemIndex);
this.applyAdd = true;
// fire an add event.
// Note that the change can be canceled from within an event listener if
// this listener calls the method cancelAdd().
this.trigger('add');
if (this.applyAdd) {
// render and select the item
this.render({animate: false});
this.selectItem(params.itemIndex);
}
else {
// undo an add
this.deleteItem(params.itemIndex);
}
}
}
links.Timeline.preventDefault(event);
};
我如何使用此功能将对象拖到时间轴而不是使用双击模拟???谢谢!
$( "div.available" ).draggable({
snap: "div.timeline-axis-grid",
stop: function(e, ui) {
$(this).dblclick();
}
});
这对我有用:
$(function() {
$( "div.timeline-event" ).draggable({
snap: "div.timeline-axis-grid",
stop: function(event){ timeline.onDblClick(event); }
});
});
相关文章:
- jQuery UI自动完成突然停止工作
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 停止jQuery UI滑块移动超过给定值
- Jquery UI自动完成无法工作
- jquery ui滑块上的滑块值
- jQuery UI可排序-多连接列表拖动
- 使用Jquery ui时滑块无法工作
- JQuery UI可拖动潜水与滚动棒到鼠标
- jQuery UI自动完成-修改问题
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- 阻止选项卡缓存jquery ui
- 将jQuery UI Timepicker Addon与React一起使用
- 如何在页面重新加载时显示jquery ui对话框
- jquery ui自动完成导致标头错误
- jquery UI draggable:UI.children不是一个函数
- 在JQuery UI Accordion Sortable中使用touchpunch无法正确使用touch
- Jquery UI对话框不会消失
- jQuery UI对话框错误,按钮导致HierarchyRequestError
- jQuery UI使用json文件自动完成
- 如何从内部销毁jQuery UI小部件's原型