2013-12-17 36 views
1

在這裏我有一個兩列的表。在1st中是可拖動的div對象so:Similate雙擊拖動結束 - jquery UI

$(function() { 
    $("div.available").draggable({ 
       snap: "div.timeline-axis-grid" 
    }); 
    }); 

第二欄是基於谷歌可視化API的時間表。 http://jsbin.com/oLaqoToH/5

你會看到什麼時候雙擊時間表表格,然後你創建一個新的div對象到時間線。

現在我想模擬雙擊時,我結束拖動對象從第1列時間線。 非常簡單,我想從第一列到時間線添加一個div對象與這個小黑客。 有沒有辦法做到這一點? 這是possbile使用jQuery嗎? 如何在可拖動的結尾模擬dobuleclick?

更新:我不需要模擬雙clikc becouse這個動作有一個功能:

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); 
}; 

如何使用此功能拖動對象到時間線而不是使用DoubleClick模擬???謝謝!

+0

咱們做這個好 – MikiMrki

回答

0
$("div.available").draggable({ 
    snap: "div.timeline-axis-grid", 
    stop: function(e, ui) { 
     $(this).dblclick(); 
    } 
}); 
+0

嗯,是的,但可拖動的div必須消失的時候拖動結束... – MikiMrki

+0

還我怎麼能叫雙擊而不是在coursoe座標但在可拖動的div對象頂部和左側? – MikiMrki

+0

問題已更新,但謝謝你的回答 – MikiMrki

0

這爲我工作:

$(function() { 
    $("div.timeline-event").draggable({ 
      snap: "div.timeline-axis-grid", 
      stop: function(event){ timeline.onDblClick(event); } 
    }); 
}); 
+0

嗯,是的,但可拖動的div必須在拖動結束時消失... – MikiMrki

+0

也可以調用雙擊但不在coursoe座標上,但在可拖動的div對象頂部和左側? – MikiMrki

+0

問題已更新,感謝您的幫助 – MikiMrki