2013-12-17 3 views
1

여기에 두 개의 열이있는 테이블이 있습니다. 첫째로 draggable div 객체입니다.끌기 끝을 두 번 클릭하십시오. jquery UI

이고 두 번째 열은 google 시각화 API를 기반으로하는 타임 라인 테이블입니다. http://jsbin.com/oLaqoToH/5

타임 라인 테이블을 두 번 클릭하면 타임 라인에 새 div 개체가 만들어집니다.

이제 첫 번째 열에서 타임 라인으로 객체를 드래그 할 때 두 번 클릭을 시뮬레이트하고 싶습니다. 이렇게 간단한 해킹으로 첫 번째 열의 타임 라인에 div 개체를 추가하고 싶습니다. 이렇게 할 방법이 있습니까? jquery와 함께 사용할 수 있습니까? drabable 결말에 dobuleclick을 어떻게 시뮬레이트 할 수 있습니까?

업데이트 : 객체를 드래그하여이 기능을 사용할 수있는 방법

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

가 더블 시뮬레이션을 사용하는 대신에 타임 라인 :이 작업을 렸기 때문에 이중 clikc을 시뮬레이션 할 필요가없는는 기능을 가지고있다 ??? 감사!

+0

하자이 좋은 – MikiMrki

답변

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

네하지만 드래그 사업부 때 드래그 끝을 사라지게해야합니다 흠 ... – MikiMrki

+0

또한 내가 전화를 할 수있는 방법을 두 번 클릭 할 수 있지만 coursoe 좌표에 하지만 draggable div 개체 위쪽 및 왼쪽 ??? – MikiMrki

+0

질문이 업데이 트되었습니다,하지만이 대답을 주셔서 감사합니다 – MikiMrki

0

이 나를 위해 일한 :

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

흠, 그렇지만 draggable div는 끝을 드래그 할 때 사라져야합니다 ... – MikiMrki

+0

도 내가 더블 클릭하지만 coursoe 좌표에 있지만 draggable div 개체의 상단과 왼쪽에 전화 할 수있는 방법 ??? – MikiMrki

+0

질문이 업데이트되었습니다. 어쨌든 도움을 주셔서 감사합니다. – MikiMrki

관련 문제