Drop cloning the items in container with both dragable and droppable

[nikhilgoud]

I have two side containers side1 items to be dropped into side2 which is configured as both draggable and droppable. The issue is that when an item(say a) is dropped exactly on item(b) in side2, then side2 has a, a.

side1

<div title="{{item.columnAlias| duplicatecolumn}}"
    class="table-column btn btn-info btn-xs"
    ng-repeat='item in dimensions.columns'
    tableName="{{item.tableName}}"
    columnAlias="{{item.columnAlias}}" uniqueId="{{item.uniqueId}}"
    ng-class="item.uniqueId" id="{{item.uniqueId}}"
    dataType="{{item.dataType}}"
    dateFunction="{{item.dateFunction}}"
    aggre="{{item.aggregation}}" colType="dimensions"
    dragType="disallow" ng-show="item.columnAlias" data-drag="true"
    data-jqyoui-options="{revert: 'invalid', helper: 'clone',  appendTo: 'div .rightside-content'}"
    ng-model="dimensions.columns"
    jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep',deepCopy:true}"
    ng-dblclick="doubleClickMeasures(item,'measures')"
    ng-context-menu="dimensionmenuOptions">{{(item.columnAlias
    | duplicatecolumn) | limitTo: 25 }}{{(item.columnAlias |
    duplicatecolumn).length > 25 ? '...' : ''}}
</div>

side2

<ol style="display: block; min-height: 65px !important; background-color: #fff; border: 1px dotted #000; margin-bottom: 0px; padding:5px; padding-bottom: 15px;"
            data-drop="true" ng-model='listColumns' data-jqyoui-options="checkDropColumnDuplicateValue" jqyoui-droppable="{multiple:true, onDrop: 'dropColumnsCallback'}">
    <li ng-repeat="item in $parent.listColumns track by $index" data-drop="true" data-drag="true" ng-model="listColumns" tableName="{{item.tableName}}"
        columnAlias="{{item.columnAlias}}" uniqueId="{{item.uniqueId}}" dataType="{{item.dataType}}" dateFunction="{{item.dateFunction}}"
        aggre="{{item.aggregation}}" colType="columns" colBlockType="columns" dragType="allow" jqyoui-droppable="{ index: {{$index}}, deepCopy: false }"
        jqyoui-draggable="{index: {{$index}}, insertInline: true, animate: true, deepCopy : false, direction:'jqyouiDirection'}"
        data-jqyoui-options="{revert: 'invalid' }" data-direction="{{item.jqyouiDirection}}" class="btn btn-info btn-xs sortable"
        style="width:100%; margin-bottom:3px; text-align: left;" >
        <span class="badge" style="float: right" ng-click="removeList(item,'Columns')">X</span>
    </li>
</ol>

[nikhilgoud]

I was able to add a workaround Tried to add accept method for li tag, for some reason it wasn't working, then programatically I added 'accept' for the same using jquery under accept of ol item html file

<ol style="display: block; min-height: 65px !important; background-color: #fff; border: 1px dotted #000; margin-bottom: 0px; padding:5px; padding-bottom: 15px;"
            data-drop="true" ng-model='listColumns' data-jqyoui-options="checkDropColumnDuplicateValue" jqyoui-droppable="{multiple:true, onDrop: 'dropColumnsCallback'}">
    <li ng-repeat="item in $parent.listColumns track by $index" data-drop="true" data-drag="true" ng-model="listColumns" tableName="{{item.tableName}}"
        columnAlias="{{item.columnAlias}}" uniqueId="{{item.uniqueId}}" dataType="{{item.dataType}}" dateFunction="{{item.dateFunction}}"
        aggre="{{item.aggregation}}" colType="columns" colBlockType="columns" dragType="allow" jqyoui-droppable="{ index: {{$index}}, deepCopy: false }"
        jqyoui-draggable="{index: {{$index}}, insertInline: true, animate: true, deepCopy : false, direction:'jqyouiDirection'}"
        data-jqyoui-options="{revert: 'invalid' }" data-direction="{{item.jqyouiDirection}}" class="btn btn-info btn-xs sortable"
        style="width:100%; margin-bottom:3px; text-align: left;" >
        <span class="badge" style="float: right" ng-click="removeList(item,'Columns')">X</span>
    </li>
</ol>

Controller code

$scope.checkDroppableAcceptance = function () {
                    //TODO not able to set droppable accept option in html via data-jqyoui-options
                    $('li[colType]').droppable({
                        accept: function (elem) {
                            //return $(elem).attr('colType') === 'columns' ? true : false;
                            return elem.context.tagName === 'LI' ? true : false;
                        }
                    });
                };
 $scope.checkDropColumnDuplicateValue = {
                    greedy: true,
                    accept: function (dragEl) {
                        var chkList1 = true;
                        //some code
                        $scope.checkDroppableAcceptance();
                        return chkList1;
                    }
                };