CODEWITHSUNDEEP
angularjshtmldrag-and-drop
user2717436
user2717436

Reputation: 795

Html5 drag and drop - copy text to drop position

In my AngularJS application I have a textarea with some text and a list of available keywords.

When the user drags a specific word and drop it in inside the text area the word should be inserted in the drop position.

For simple demonstration - try to select some text in your browser and drag it to any input field you have in your page - the text is inserted exactly at the drop position.

I want to achieve the same functionality. How can I?

For working with HTML5 DND and angular I used the directives from this fiddle - http://jsfiddle.net/jgoemat/NWnF8/

module.directive('draggable', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
    element[0].addEventListener('dragstart', scope.handleDragStart, false);
    element[0].addEventListener('dragend', scope.handleDragEnd, false);
   }
  }
});

module.directive('droppable', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element[0].addEventListener('drop', scope.handleDrop, false);
      element[0].addEventListener('dragover', scope.handleDragOver, false);
    }
  }
});

Upvotes: 1

Views: 1980

Answers (1)

SomeName
SomeName

Reputation: 41

$scope.$digest();

http://jsfiddle.net/NWnF8/11/

Read more about $digest. https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Upvotes: 3

Related Questions