Sortable: Fix drag and drop with default filter without jquery (#9698)

DevExpress · Sep 13, 2019 · 4844bba · 4844bba
1 parent dbb647b
commit 4844bba
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 3 deletions.
diff --git a/js/ui/draggable.js b/js/ui/draggable.js
@@ -199,6 +199,10 @@ var Draggable = DOMComponentWithTemplate.inherit({
             eventsEngine.on($element, POINTERDOWN_EVENT_NAME, data, this._pointerDownHandler.bind(this));
         }
 
+        if(itemsSelector[0] === ">") {
+            itemsSelector = itemsSelector.slice(1);
+        }
+
         eventsEngine.on($element, DRAGSTART_EVENT_NAME, itemsSelector, data, this._dragStartHandler.bind(this));
         eventsEngine.on($element, DRAG_EVENT_NAME, data, this._dragMoveHandler.bind(this));
         eventsEngine.on($element, DRAGEND_EVENT_NAME, data, this._dragEndHandler.bind(this));
@@ -262,8 +266,20 @@ var Draggable = DOMComponentWithTemplate.inherit({
         }
 
         let allowMoveByClick = this.option("allowMoveByClick");
+        if(allowMoveByClick) {
+            return this.$element();
+        }
+
+        let $target = $(e.target),
+            itemsSelector = this._getItemsSelector();
 
-        return allowMoveByClick ? this.$element() : $(e.target);
+        if(itemsSelector[0] === ">") {
+            var $items = this.$element().find(itemsSelector);
+            if(!$items.is($target)) {
+                $target = $target.closest($items);
+            }
+        }
+        return $target;
     },
 
     _getSourceElement: function() {
@@ -296,14 +312,25 @@ var Draggable = DOMComponentWithTemplate.inherit({
 
     _isValidElement: function(event, $element) {
         let handle = this.option("handle"),
-            isHandleElement = handle && $(event.originalEvent.target).closest(handle).length;
+            $target = $(event.originalEvent && event.originalEvent.target);
 
-        return !$element.is(".dx-state-disabled, .dx-state-disabled *") && (!handle || isHandleElement);
+        if(handle && !$target.closest(handle).length) {
+            return false;
+        }
+
+        if(!$element.length) {
+            return false;
+        }
+
+        return !$element.is(".dx-state-disabled, .dx-state-disabled *");
     },
 
     _dragStartHandler: function(e) {
         let $element = this._getDraggableElement(e);
 
+        if(this._$sourceElement) {
+            return;
+        }
         if(!this._isValidElement(e, $element)) {
             e.cancel = true;
             return;

diff --git a/testing/tests/DevExpress.ui.widgets/sortable.tests.js b/testing/tests/DevExpress.ui.widgets/sortable.tests.js
@@ -52,6 +52,31 @@ QUnit.test("Element has class", function(assert) {
 
 QUnit.module("placeholder", moduleConfig);
 
+QUnit.test("initial placeholder if filter is not defined", function(assert) {
+    // arrange
+    let items,
+        $placeholder,
+        $dragItemElement;
+
+    this.createSortable({
+    });
+
+    items = this.$element.children();
+    $dragItemElement = items.eq(0);
+
+    // assert
+    assert.strictEqual(items.length, 3, "item count");
+
+    // act
+    pointerMock($dragItemElement).start().down().move(10, 0);
+
+    // assert
+    items = this.$element.children();
+    $placeholder = items.eq(0);
+    assert.strictEqual(items.length, 3, "item count");
+    assert.ok($placeholder.hasClass("dx-sortable-placeholder"), "there is a placeholder");
+});
+
 QUnit.test("initial placeholder", function(assert) {
     // arrange
     let items,