How to use HTML5 drag and drop in combination with KnockoutJS ?

How to use HTML5 drag and drop in combination with KnockoutJS ?

Asked on December 1, 2018 in knockout js.
Add Comment


  • 3 Answer(s)

    It makes all the events to  stop  default / return false by default . So set the  dragstart handler return true is the work to do , and now it works.

    Answered on December 1, 2018.
    Add Comment

       IF SSCCE working is needed ; This solution will solve the issue:

       http://jsfiddle.net/marrok/m63aJ/

    HTML

    <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <ul id="people" data-bind='template: { name: "personTmpl", foreach: people }'>
    </ul>
    <div class="trash" data-bind ="visible:dragging, event:{
      dragover: function(data, event){
        event.preventDefault();
      },
      drop: function(data, event){
        console.log('trash', $root.drag_start_index())
        $root.trash($root.drag_start_index())
        event.preventDefault();
      }
    }"> <span>DELETE</span> </div>
    <script id="personTmpl" type="text/html">
      <li class="draggable" draggable="true" data-bind="event:{
        dragstart: function(data, event){
            $(event.target).addClass('dragSource')
            $root.drag_start_index($index());
            return $(event.target).hasClass('draggable');},
          dragend: function(data, event){
            $root.drag_start_index(-1);
            $(event.target).removeClass('dragSource')
            return true;
          },
          dragover: function(data, event){event.preventDefault();},
          dragenter: function(data, event){
              $root.drag_target_index($index());
              var element = $(event.target)
              if(element.hasClass('draggable'))
                element.toggleClass('dragover');
              event.preventDefault();
          },
          dragleave: function(data, event, $index){
              var element = $(event.target)
              if(element.hasClass('draggable'))
                element.toggleClass('dragover');
              event.preventDefault();
          },
          drop: function(data, event){
              $(event.target).removeClass('dragover');
              console.log('swap', $root.drag_start_index(), $root.drag_target_index() )
              $root.swap($root.drag_start_index(), $root.drag_target_index())
            }
          }">
        <span data-bind='text: name'></span>
      </li>
    </script>
    

    Knockout

    var Person = function(name) {
        this.name = ko.observable(name);
    };
    var PeopleModel = function() {
        var self = this;
        self.drag_start_index = ko.observable();
        self.drag_target_index = ko.observable();
        self.dragging = ko.computed(function() {
            return self.drag_start_index() >= 0;
        });
        self.people = ko.observableArray([
            new Person("Oleh"), new Person("Nick C."), new Person("Don"), new Person("Ted"), new Person("Ben"),     new Person("Joe"), new Person("Ali"), new Person("Ken"), new Person("Doug"), new Person("Ann"), new     Person("Eve"), new Person("Hal")]);
        self.trash = function(index) {
            self.people.splice(index, 1)
    }
        self.swap = function(from, to) {
            if (to > self.people().length - 1 || to < 0) return;
            var fromObj = self.people()[from];
            var toObj = self.people()[to];
            self.people()[to] = fromObj;
            self.people()[from] = toObj;
            self.people.valueHasMutated()
        }
    };
    ko.applyBindings(new PeopleModel());​
    
    Answered on December 1, 2018.
    Add Comment

       If the templateOptions is given to the template binding from a nested template , Then be careful in giving the  syntax. If binding is wrong,Then there will be a problem.

       For ex:

    <div data-bind="template: { name: 'items', data: newItems, templateOptions: { header: “New Items!”}}"></div>
    

       In this , The jQuery Templates plugin is confused by the }} at the last of the binding, since that is part of its syntax. Adding a space in the  braces is work for this.

    <div data-bind="template: { name: 'items', data: newItems, templateOptions: { header: “New Items!”} }"></div>
    
    Answered on December 1, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.