Enable image drop on panelfield

The CMS Questions
5

###Okay - I figured it out myself, I guess…

Kirby is using the default HTML 5 / drag and drop - I guess, which allows it to bind a droppable action to certain fields.

  yakme_field.parent().droppable({
    hoverClass: 'yakme_field_over',
    drop: function(e, ui) {
      var draggable = ui.draggable;
      yakme_text(index, draggable.data('text'));
    }
  });

var yakme_text = function(index, data) {

  var cm = $('.CodeMirror')[index].CodeMirror;
  var doc = cm.getDoc();
  var cursor = doc.getCursor();
  var line = doc.getLine(cursor.line);
  var pos = {
      line: cursor.line,
      ch: line.length - 1
  }

  doc.replaceRange(data, pos);

}

The example above, listens to every draggable item (e.g. the assets in the asset-list, sets a :hover class when hovering and a function when dropping a draggable item.

The yakme_field.parent() is the listener in this case…

Will update the YAKME Field - when done!

yakme_drag-and-drop.gif1680×1052 547 KB

YAKME - now with drag 'n drop…

2 Likes