как реализовать с помощью функции angular drag and drop? - вопрос №2404635

Допустим есть функция с помощью которой можно передвигать блоки в любое место. (свободное передвижение) Но интересует чтоб допустим было две колонки по ширине которой допустим основная часть занимает 80% страницы а вторая колонка 20%. высота 100% но это не столь важно. Далее в малой колонки должны быть допустим блоки желательно не repeat, с фиксированным расположением которые можно перетаскивать в свободное перемещение во вторую колонку но после перетаскивания блок должен клонироваться (не исчезать из своего места) а блоки которые попали в свободную области (во вторую колонку) их можно удалять также перемещать в любое свободное место по области. Вот что есть на данном этапе

<code><br /> <span style="color: #3e4547; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.5px; white-space: pre; background-color: #f6f7f7;">myApp.</span><span style="color: #3e4547; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.5px; white-space: pre; background-color: #f6f7f7;">myApp.directive(</span><span class="hljs-string" style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 13.5px; vertical-align: baseline; background: #f6f7f7; color: #28b245; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; white-space: pre;">'ngDraggable'</span><span style="color: #3e4547; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.5px; white-space: pre; background-color: #f6f7f7;">, </span><span class="hljs-function" style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 13.5px; vertical-align: baseline; background: #f6f7f7; color: #8d67d8; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; white-space: pre;"><span class="hljs-keyword" style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">function</span><span class="hljs-params" style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent; color: #e46467;">($document)</span> </span><span style="color: #3e4547; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.5px; white-space: pre; background-color: #f6f7f7;">{</span><br /></code>return{ restrict: 'A', scope: { dragOptions: '=ngDraggable'}, link: function(scope, elem, attr) { varstartX, startY, x = 0, y = 0, start, stop, drag, container; varwidth = elem[0].offsetWidth, height = elem[0].offsetHeight; if(scope.dragOptions) { start = scope.dragOptions.start; drag = scope.dragOptions.drag; stop = scope.dragOptions.stop; varid = scope.dragOptions.container; if(id) { container = document.getElementById(id).getBoundingClientRect(); } } elem.on('mousedown', function(e) { e.preventDefault(); startX = e.clientX — elem[0].offsetLeft; startY = e.clientY — elem[0].offsetTop; $document.on('mousemove', mousemove); $document.on('mouseup', mouseup); if(start) start(e); }); function mousemove(e) { y = e.clientY — startY; x = e.clientX — startX; setPosition(); if(drag) drag(e); } function mouseup(e) { $document.unbind('mousemove', mousemove); $document.unbind('mouseup', mouseup); if(stop) stop(e); } function setPosition() { if(container) { if(x < container.left) { x = container.left; } elseif(x > container.right — width) { x = container.right — width; } if(y < container.top) { y = container.top; } elseif(y > container.bottom — height) { y = container.bottom — height; } } elem.css({ top: y + 'px', left: x + 'px'}); } } } })