fix: #2327 Add support to fixed times drag and drop (#2372)

* Add support to fixed times drag and drop
* Fix IE support for drag and drop
* Add support to IE pointer location and data setting/getting

examples/timeline/other/drag&drop.html

@@ -49,6 +49,10 @@
     <li draggable="true" class="item">
       item 3 - range
     </li>
+    <li draggable="true" class="item">
+      item 3 - range - fixed times - <br>
+      (start: now, end: now + 10 min)
+    </li>
   </ul>
 </div>
 
@@ -110,12 +114,16 @@
     var item = {
       id: new Date(),
       type: itemType,
-      content: event.target.innerHTML.split('-')[0].trim(),
-      start: new Date(),
-      end: new Date(1000*60*60*24 + (new Date()).valueOf()),
+      content: event.target.innerHTML.split('-')[0].trim()
     };
 
-    event.dataTransfer.setData("text/plain", JSON.stringify(item));
+    var isFixedTimes = (event.target.innerHTML.split('-')[2] && event.target.innerHTML.split('-')[2].trim() == 'fixed times')
+    if (isFixedTimes) {
+      item.start = new Date();
+      item.end = new Date(1000*60*10 + (new Date()).valueOf());
+    }
+
+    event.dataTransfer.setData("text", JSON.stringify(item));
   }
 
   var items = document.querySelectorAll('.items .item');

lib/timeline/Core.js

@@ -231,7 +231,7 @@ Core.prototype._create = function (container) {
     }
 
     // make sure your target is a vis element
-    if (!event.target.className.includes('vis')) return;
+    if (!event.target.className.indexOf("vis") > -1) return;
 
     // make sure only one item is added every time you're over the timeline
     if (itemAddedToTimeline) return;
@@ -244,7 +244,7 @@ Core.prototype._create = function (container) {
   function handleDrop(event) {
     // return when dropping non-vis items 
     try {
-      var itemData = JSON.parse(event.dataTransfer.getData("text/plain"))
+      var itemData = JSON.parse(event.dataTransfer.getData("text"))
       if (!itemData.content) return
     } catch (err) {
       return false;
@@ -252,8 +252,8 @@ Core.prototype._create = function (container) {
 
     itemAddedToTimeline = false;
     event.center = {
-      x: event.x,
-      y: event.y
+      x: event.clientX,
+      y: event.clientY
     }
     me.itemSet._onAddItem(event);
 

lib/timeline/component/ItemSet.js

@@ -1856,12 +1856,12 @@ ItemSet.prototype._onAddItem = function (event) {
       newItemData[this.itemsData._fieldId] = itemData.id || util.randomUUID();
 
       if (itemData.type == 'range' || (itemData.end && itemData.start)) {
-
         if (!itemData.end) {
           var end = this.body.util.toTime(x + this.props.width / 5);
           newItemData.end = snap ? snap(end, scale, step) : end;
         } else {
-          newItemData.end = new Date(newItemData.start._i).getTime() + new Date(itemData.end).getTime() - new Date(itemData.start).getTime();
+          newItemData.end = itemData.end;
+          newItemData.start = itemData.start;
         }
       }
     } else {