We like to create an angular spa webproject, where customers can build their dashboard using a sortable panel. Inside the sortable item there is a list of items which should be draggable to other windows (other Programs) to drop them there and read the assigned transfer data.
But I couldn't achieve this because everytime the whole widget takes the drag-events, not the single item.
Here some code:
I use some panels like this:
with each panel (directive 'panelColumn'):
and then the items for the panel (directive 'myItemList'):
and here
I tried all of the examples but couldn't find a solution for this problem. Also tried to use the plain jquery sortable as in the panel example (even with handle) but no luck.
Could you please give me a hint or even better an example how to drag some thing out of a sortable panel?
Best regards
Gerd
But I couldn't achieve this because everytime the whole widget takes the drag-events, not the single item.
Here some code:
I use some panels like this:
<div class="panel-wrap" panel-wrapper ng-controller="PanelCtrl as panelCtrl"> <div ng-repeat="panelCol in panelCtrl.panels"> <panel-column panel-col="panelCol"></panel-column> </div></div>with each panel (directive 'panelColumn'):
<div class="col-sm-4 col-md-2" id="{{panelCol.id}}" kendo-sortable k-placeholder="panelCol.placeholder" k-hint="panelCol.hint" k-connect-with="{{panelCol.others}}"> <my-item-list channel="panelCol"></my-item-list> <my-item-list channel="panelCol"></my-item-list></div>and then the items for the panel (directive 'myItemList'):
<div class="widget k-widget" id="{{myCtrl.id}}"> <span class="widget-header"> <h4> <img ng-src="{{myCtrl.img}}" /> {{myCtrl.title}} <span class="collapsed k-icon k-i-arrowhead-n pull-right"></span> </h4> </span> <div class="k-widget collapsablelist" style="height:400px;"> <perfect-scrollbar class="scroller" wheel-propagation="true" suppress-scroll-x="true" wheel-speed="50" refresh-on-change="someArray" on-scroll="onScroll(scrollTop, scrollHeight)"> <div ng-repeat="d in myCtrl.data"> <my-item item="d"></my-item> </div> </perfect-scrollbar> </div> </div>and here
<div class="item"ng-style="{'border-left-color': item.color }" item-draggable="true" draggable="true"> .. some content here ...</div>I tried all of the examples but couldn't find a solution for this problem. Also tried to use the plain jquery sortable as in the panel example (even with handle) but no luck.
Could you please give me a hint or even better an example how to drag some thing out of a sortable panel?
Best regards
Gerd