Started attachment drag/drop
Currently fighting between sortable and tinymce mechanisms which prevent this working due to the different events stopping the drop event while needing the dragover for cursor placement.
This commit is contained in:
parent
76fcbd3752
commit
18f406d97b
4 changed files with 32 additions and 1 deletions
|
@ -38,4 +38,14 @@ class Attachment extends Ownable
|
|||
}
|
||||
return url('/attachments/' . $this->id);
|
||||
}
|
||||
|
||||
public function htmlLink(): string
|
||||
{
|
||||
return '<a target="_blank" href="'.e($this->getUrl()).'">'.e($this->name).'</a>';
|
||||
}
|
||||
|
||||
public function markdownLink(): string
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,6 +2,11 @@ import Sortable from "sortablejs";
|
|||
|
||||
/**
|
||||
* SortableList
|
||||
*
|
||||
* Can have data set on the dragged items by setting a 'data-drag-content' attribute.
|
||||
* This attribute must contain JSON where the keys are content types and the values are
|
||||
* the data to set on the data-transfer.
|
||||
*
|
||||
* @extends {Component}
|
||||
*/
|
||||
class SortableList {
|
||||
|
@ -14,7 +19,21 @@ class SortableList {
|
|||
animation: 150,
|
||||
onSort: () => {
|
||||
this.$emit('sort', {ids: sortable.toArray()});
|
||||
}
|
||||
},
|
||||
setData(dataTransferItem, dragEl) {
|
||||
console.log('cat');
|
||||
const jsonContent = dragEl.getAttribute('data-drag-content');
|
||||
if (jsonContent) {
|
||||
const contentByType = JSON.parse(jsonContent);
|
||||
dataTransferItem.setData('bookstack/json', jsonContent);
|
||||
for (const [type, content] of Object.entries(contentByType)) {
|
||||
dataTransferItem.setData(type, content);
|
||||
}
|
||||
}
|
||||
},
|
||||
revertOnSpill: true,
|
||||
dropBubble: true,
|
||||
dragoverBubble: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -639,6 +639,7 @@ class WysiwygEditor {
|
|||
});
|
||||
|
||||
editor.on('drop', function (event) {
|
||||
console.log('drop')
|
||||
let dom = editor.dom,
|
||||
rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
|
||||
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
<div component="ajax-delete-row"
|
||||
option:ajax-delete-row:url="{{ url('/attachments/' . $attachment->id) }}"
|
||||
data-id="{{ $attachment->id }}"
|
||||
data-drag-content="{{ json_encode(['text/html' => $attachment->htmlLink()]) }}"
|
||||
class="card drag-card">
|
||||
<div class="handle">@icon('grip')</div>
|
||||
<div class="py-s">
|
||||
|
|
Loading…
Reference in a new issue