JSFiddle - React, Tailwind, and code Playground
HTML
<div id="draggable">Draggable</div><br/>
<ul id="sortable">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
JavaScript
$("#draggable").draggable({
connectToSortable: "#sortable",
helper: function () {
return $("<div></div>").text($.text(this)+" (dragged)");
},
insert: function () {
return $("<li></li>").text($.text(this)+" (pasted)");
}
});
$("#sortable").sortable();
(function ($, undefined) {
"use strict";
var proto = $.ui.draggable.prototype;
var drag = proto.plugins.drag
proto.options.insert = 'clone';
proto._createInsert = function (event) {
var o = this.options;
return $.isFunction(o.insert) ?
$(o.insert.call(this.element[0], event)) :
(o.insert == 'clone' ? this.element.clone().removeAttr('id') : $(o.insert));
};
for (var i = 0; i < drag.length; ++ i) {
var handler = drag[i];
if (handler[0] === "connectToSortable") {
handler[1] = ondrag;
}
}
proto = drag = null;
// rest is copied from jquery.ui.draggable.js with one single line changed
function ondrag (event, ui) {
var inst = $(this).data("draggable"), self = this;
var checkPos = function(o) {
var dyClick = this.offset.click.top, dxClick = this.offset.click.left;
var helperTop = this.positionAbs.top, helperLeft = this.positionAbs.left;
var itemHeight = o.height, itemWidth = o.width;
var itemTop = o.top, itemLeft = o.left;
return $.ui.isOver(helperTop + dyClick, helperLeft + dxClick, itemTop, itemLeft, itemHeight, itemWidth);
};
$.each(inst.sortables, function(i) {
//Copy over some variables to allow calling the sortable's native _intersectsWith
this.instance.positionAbs = inst.positionAbs;
this.instance.helperProportions = inst.helperProportions;
this.instance.offset.click = inst.offset.click;
if(this.instance._intersectsWith(this.instance.containerCache)) {
//If it...