How to create a new element, then drag it with interactjs?

What I'm trying to do, is create an element from a none-draggable element. Then start dragging the new element from there.

I've seen the examples, and managed to replicate the examples from Interact.js where you clone and drag an already draggable element in Interact.js. But that's not what I'm doing here.

interact('.drag-drop')
  .draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    autoScroll: true,
    onmove: dragMoveListener
  })

function createDragDropElement(event){
  var element = document.createElement('div');
  element.className = 'drag-drop';
  element.text = 'Drop me!';
  element.style.position = 'absolute';
  element.style.left =  event.pageX + 'px';
  element.style.top = event.pageY + 'px';

  document.body.appendChild(element);

  //here is where I'd like to transfer the drag over to the newly created element.
}

I've managed to create the element just fine. However, I'm having trouble automatically dragging it. After creation, I need to release the mouse and start a new drag on the element. What I'd like to happen though, is that I start dragging the element immediately rather than having to re-click on it.