Drag & Drop from Sortable-Panel to other window

2 posts, 0 answers
  1. Gerd
    Gerd avatar
    1 posts
    Member since:
    Mar 2008

    Posted 03 Feb 2015 Link to this post

    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:
    <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>

    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>

    and then the items for the panel (directive 'myItemList'):
    <div class="widget k-widget" id="{{myCtrl.id}}">
            <span class="widget-header">
                    <img ng-src="{{myCtrl.img}}" />
                    <span class="collapsed k-icon k-i-arrowhead-n pull-right"></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>

    and here
    <div class="item"ng-style="{'border-left-color': item.color }" item-draggable="true" draggable="true">
       .. some content 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
  2. Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 05 Feb 2015 Link to this post

    Hi Gerd,

    Please try to tell the Sortable to ignore the inner items that you would like to drag. You may use the ignore option to achieve that:

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top