How to drag and drop on mobile ?

[caohothang]

Thanks for your library it very good, but now i need it can drag and drop on mobile, can you support it ?

[DanielSchuech]

I cant remember a problem with drag and drop on mobile devices. I tested it with different andoroid devices and an ipad air. Could you give an example?

[caohothang]

On mobile i can't drag or drop
This is my code

var containerLeft = document.querySelector('#containerLeft'),
containerRight = document.querySelector('#containerRight');

function accepts(el, target, source) {
if (source === containerLeft || source === target) {
return true;
}
}

dragularService([containerLeft], {
scope: $scope,
containersModel: [$scope.exercises],
copy: true,
//move only from left to right
accepts: accepts
});

dragularService([containerRight], {
scope: $scope,
containersModel: [$scope.plan.exercises],
removeOnSpill: true,
//move only from left to right
accepts: accepts
});

$scope.$on('dragulardrag', function(e, el) {
e.stopPropagation();
$(el).find('.fa-heart').hide();
});
$scope.$on('dragulardrop', function(e, el) {
e.stopPropagation();
// $('.fa-heart').show();
$timeout(function() {
$scope.updatePlan();
}, 50);
});

And this is HTML

Drag in here

    <div class="box-plan-post" ng-repeat='exercise in plan.exercises track by $index'  ng-class="{'block-flow':exercise.type == 5 || exercise.type == 6,'repeat':exercise.type == 6}" type='{{exercise.type}}' index="{{exercise.index}}" duration="{{exercise.durationTime}}">
      <div  ng-if="exercise.type == 3"  index="{{$index}}">
        <div class="image-show">
          <a ng-dblclick="removePoseInPlan($index);" title="{{exercise.englishName}}">
            <img ng-if='exercise.image != ""'  src="{{exercise.small}}">
            <img ng-if='exercise.image == ""'  src="frontend/web/images/img4.png">
          </a>
        </div>
        <div class="display-title name">
          <a title="{{exercise.englishName}}">{{exercise.englishName}}</a>
        </div>
        <div class="display-title sec">
          <a title="{{exercise.englishName}}">{{exercise.durationTime}} Sec</a>
          <input onkeyup="javascript:this.value=this.value.replace(/[^0-9]/g, '');" value="" class="edit-time">
          <i class="fa fa-pencil"></i>
        </div>
      </div>
      <div ng-dblclick="removePoseInPlan($index);" ng-if="exercise.type == 4" class="" index="{{$index}}">
        <div class="image-show">
          <a title="{{exercise.englishName}}">
            <img ng-if='exercise.image != ""'  src="{{exercise.image}}">
            <img ng-if='exercise.image == ""'  src="frontend/web/images/img4.png">
          </a>
        </div>
        <div class="display-title">
          <a title="{{exercise.name}}">{{exercise.name}}</a>
        </div>
      </div>
      <div ng-dblclick="removePoseInPlan($index);" class="start-flow check-flow" ng-if="exercise.value === 'start'" data="{{exercise.value}}" type="{{exercise.type}}" index="{{$index}}">
        <div  class="line-start"><span ng-if="exercise.type == 6">{{exercise.name}}</span></div>
        {{exercise.name}}
      </div>

      <div ng-dblclick="removePoseInPlan($index);" ng-if="exercise.value === 'end'" data="{{exercise.value}}" type="{{exercise.type}}" class="end-flow check-flow" index="{{$index}}">
        {{exercise.name}}
      </div>
      <div ng-dblclick="removePoseInPlan($index);" ng-if="exercise.type == 6" class="rr"  type="{{exercise.type}}" value="{{exercise.value}}"  index="{{$index}}">
        <span>{{exercise.name}}</span>
      </div>

      <div ng-dblclick="removePoseInPlan($index);" ng-if="exercise.type == 2" class="block-template" index="{{$index}}">
        <p>{{exercise.title}}</p>
        <div>{{exercise.description}}</div>
      </div>

    </div>
  </div>
  <div class="clear"></div>
</div>
<hr ng-if='plan.files.length > 0'>

<div class="plan-post-row files">
  <div class="box-plan-post" ng-dblclick="remove($index)" ng-repeat="file in plan.files track by $index">
    <div ng-if='file.type==1'>
      <img src="frontend/web/images/video.png">
    <a class="limit-text" title="{{file.fileName}}">{{file.fileName}}</a>
    </div>
    <div ng-if='file.type==2'>
      <img src="frontend/web/images/master-account/resourch-icon2.png">
    <a class="limit-text" title="{{file.fileName}}">{{file.fileName}}</a>
    </div>
    <div ng-if='file.type==3'>
      <img src="{{file.fileLink}}">
    <a class="limit-text" title="{{file.fileName}}">{{file.fileName}}</a>
    </div>
    <div ng-if='file.type==4'>
       <img src="frontend/web/images/master-account/resourch-icon3.png">
    <a class="limit-text" title="{{file.fileName}}">{{file.fileName}}</a>
    </div>
  </div>
</div>
<h4 class='block-text'>Manage Exercise
<a  class="create-ex" ui-sref="teacher.createexercise({id:id})">CREATE EXERCISE</a>
</h4>
<div class='parent' >
  <div class='wrapper plan-post-row plan-post-row-1'>
    <div class="list-plan-group">
      <ul>
        <li ng-class="{'all all-blue' : filter.typeOfTeach === ''}"><a ng-click="filter.typeOfTeach = '';
          search();">ALL</a></li>
        <li ng-repeat='(key,value) in typeOfTeachs' ng-class="{'all all-blue' : filter.typeOfTeach === value}"><a ng-click="filter.typeOfTeach = value;
            search();">{{value}}</a></li>


      </ul>
      <ul>
        <li ng-class="{'all all-purple' : filter.exerciseCategory === ''}" ng-click="changeFilterCategory('');
          search();"><a href="">ALL</a></li>
        <li ng-class="{'all all-purple' : filter.exerciseCategory === category}" ng-repeat="(key,category) in exerciseCategories">
          <a ng-click="changeFilterCategory(category);
              search();">{{category}}</a>
        </li>
      </ul>
      <ul>
        <li ng-class="{'all all-purple' : predicate === ''}"><a ng-click="order('');
          search();">ALL</a></li>
        <li ng-class="{'all all-purple' : predicate === 'englishName'}">
          <a ng-click="order('englishName');
            search();" >A-Z English</a>
          <span class="sortorder" ng-show="predicate === 'englishName'" ng-class="{reverse:reverse}"></span>
        </li>
        <li ng-class="{'all all-purple' : predicate === 'sanskritName'}">
          <a ng-click="order('sanskritName');
            search();" >A-Z Sanskrit</a>
          <span class="sortorder" ng-show="predicate === 'sanskritName'" ng-class="{reverse:reverse}"></span>
        </li>
        <li ng-repeat="level in difficultLevels" ng-class="{'all all-purple' : predicate === level}">
      <a ng-click="order(level);
            search();" >{{level}}</a>
      <span class="sortorder" ng-show="predicate === level" ng-class="{reverse:reverse}"></span>
    </li>

      </ul>
    </div>

    <div id="containerLeft"  class="plan-post-row plan-post-row-1 containerVertical" infinite-scroll='nextPage()' infinite-scroll-disabled='paging.busy' infinite-scroll-distance='0'>

        <div class="box-plan-post check{{$index}}" ng-repeat='exercise in exercises' ng-dblclick="addPoseToPlan(exercise)"  index="{{$index}}" type='{{exercise.type}}' >

          <div ng-if="exercise.type == 3"  >
            <div class="image-show">
              <a title="{{exercise.englishName}}">
                <img ng-if='exercise.image != ""'  src="{{exercise.small}}">
                <img ng-if='exercise.image == ""'  src="frontend/web/images/img4.png">
              </a>
            </div>
            <div class="display-title name">
              <a title="{{exercise.englishName}}">{{exercise.englishName}}</a>
                <i ng-click="addToFavourites(exercise)" title="Add to my favourites" class="fa fa-heart"></i>
            </div>
            <div class="display-title sec">
              <a title="{{exercise.englishName}}">{{exercise.durationTime}} Sec</a>
              <input value="" onkeyup="javascript:this.value=this.value.replace(/[^0-9]/g, '');" class="edit-time">
              <i class="fa fa-pencil"></i>
            </div>

          </div>
          <!--      ng-class="{'start-flow':exercise.code == 'start','end-flow':exercise.code == 'end'}" -->
          <div ng-if="exercise.type == 4" class="" >
            <!--        <div ng-if="exercise.code == 'start'" class="line-start"><span>Repeat X 3</span></div>
                    <div ng-if="exercise.code == 'end'" class="line-start"><span></span></div>-->
            <div class="image-show">
              <img  src="{{exercise.img}}">
            </div>
            <div class="display-title">
              <a title="{{exercise.name}}">{{exercise.name}}</a>
            </div>
          </div>
        </div>
        <div class="clear"></div>
        <div ng-show='!paging.busy'>Loading data...</div>

    </div>
  </div>
</div>

[DanielSchuech]

At first, please don't post your code again like this. It is nearly unreadable without spaces/tabs ;)
It is always better to provide a short plunkr where someone can have a look to your problem and just correct it.

Your use of the dragula Service looks very interesting ^^. I think you don´t use angular-dragula correctly. Is the drag and drop working correctly on your workstation?

1. check if you inject correctly the dragulaService (not dragularService).

2. I would recommend to use the dragula directive in combination with dragula-model

Maybe just have a look at the demo page there are hints how to use it.

If it isn´t working then please create a plunkr and then i can have a look into it ;)

[caohothang]

OK thanks your support
I will test again

[bevacqua]

Please ask on Slack. https://dragula-slackin.herokuapp.com/