Drag item from one timeline to another

[itfourp]

I use the vis.js timeline in a project where I want to drag an item from one timeline over to another. I used jQuery drag&drop and it works quite well on Chrome, but it does not work on IE11; probably there is a problem with the propagation of the pointerdown event (does hammer maybe stop the propagation?). I wrote an event-handler to stop propagation of the pointerdown event before the timeline gets it and then drag&drop worked, but now I was unable to select any items. I need both features though. Is there a way to drag items from one timeline to another without relying on another library? Or is there maybe a better way than stopping the propagation of the event?

Best regards! itfourp

[josdejong]

Drag&drop is not supported right now, I will put this as a feature request.

[mojoaxel]

@itfourp Maybe you could find the time to share your current state as an simple example e.g. on jsbin!? It would be much easier to get to the root of the problem.

[itfourp]

@mojoaxel Hey, thank you for answering. I found a workaround for the problem a while ago.

if (Browser.IsMicrosoftInternetExplorer) {
    item.on("pointerdown", function (event) {
        event.stopPropagation();
    });
    item.on("click", function (event) {
        var clicked = $(event.currentTarget);
        var id = clicked.data("id");
        timeline.setSelection([id], { selectEvent: event });
    });
}

Since that prevented selecting items I had to modify the setSelection event.

Timeline.prototype.setSelection = function (ids, options) {
    this.itemSet && this.itemSet.setSelection(ids);
    if (options && options.focus) {
      this.focus(ids, options);
    } else if (options && options.selectEvent) {
      var newSelection = this.itemSet.getSelection();
      if (newSelection.length > 0 || oldSelection.length > 0) {
        this.body.emitter.emit('select', {
          items: newSelection,
          event: event
        });
      }
    }
};

Not quite the best solution, but for now it works.

[mojoaxel]

@ttjoseph Thanks for providing the code-snippets. Maybe we can Integrate it in the library? Feel free to create a Pull Request :wink:

[itfourp]

The first code snippet is done in the view that I used the vis-timeline in, so I cannot integrate that code. The second snippet was more like a dirty quick fix to make it work for me (and could probably be done much better). I'll create a Pull Request for the second part of the code once I've got the time to put it into the latest version (i'm still with 4.14.0). Would be great to have it in here, so I can upgrade without any hassle then!

[yotamberk]

@itfourp Any update for the PR you promised? :wink:

[itfourp]

@yotamberk Sorry, I forgot about this and haven't updated my local version yet. I'll look into it next week and then I'm probably able to create the promised PR.

[yotamberk]

@itfourp Any update on this? Notice there is now a drag and drop option in the timeline. You should look at using that.

[Clarence344]

@itfourp Have you an example of your solution? webpage oder codepen? I would like to drag an item from Timeline 1 to Timeline2, but its not possible to drag the item out of the container (border).

thanks

[itfourp]

@yotamberk Sorry, I've not been looking into this for a while, but I could not find much about those options in the docs. Is it already in there?

@Clarence344 This is the last thing I tried: http://jsbin.com/vapubaj/edit?html,output Please note this it not a clean solution, since in some browsers you cannot select draggable items.

About what we've been talking about in gitter, I wasn't able to find out what differences in IE/Edge/Chome exactly caused the selection problem and then I gave up.

[Kandarp143]

@itfourp I am unable to open your example in jsbin it throws 502 error, can you provide me a working link.

[itfourp]

@Kandarp143 The example in jsbin still works for me. You could try this link as well: http://jsbin.com/gezimuwula

[mjelecevic]

How did you set drag event of jquery on the items of timeline?

[itfourp]

I've enabled jquery drag like this:

var draggableTimeline = new vis.Timeline( container );
for ( var prop in draggableTimeline.itemSet.items ) {
    if ( draggableTimeline.itemSet.items[prop].dom &&
        draggableTimeline.itemSet.items[prop].dom.box ) {
        var item = $( draggableTimeline.itemSet.items[prop].dom.box );
        //  enable drag for items
        item.draggable( {
            axis: "y",
            revert: "invalid",
            revertDuration: 150,
            scroll: false,
            helper: "clone",
            appendTo: "body",
            drag: function( event, ui ) {
                event.stopImmediatePropagation();
            },
            stop: function( event, ui ) {
                event.stopImmediatePropagation();
            }
        } );
    }
}

[mjelecevic]

Do I need to set in options editable: false for the timeline? I can't drag the items when I set draggable with jquery-ui. Because when I try to drag them my timeline is moving left or right. Do I need something else to set in the options for my timeline?

And do you know maybe is there any solution for the grid in dragging? I don't want to have the grid on drag.