拖放门户项目

1
2
3
4
5
6
7
8
9
10
11
12
var template =
  '<div data-itemid="{id}" class="card block" draggable="true">' +
    '<figure class="card-image-wrap"><img class="card-image" src="{thumbnailUrl}" alt="Card Thumbnail">' +
      '<figcaption class="card-image-caption">{title}</figcaption>' +
    "</figure>" +
    '<div class="card-content">' +
      "<ul>" +
        "<li>Published Date:</li>" + "{created}" +
        "<li>Owner:</li>" + "{owner}" +
      "</ul>" +
    "</div>" +
  "</div>";

1
2
3
4
5
var portalItems = layerItems.map(function(itemid) {
  return new PortalItem({
    id: itemid
  }).load();
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
promiseUtils.eachAlways(portalItems).then(function(items) {
  var docFrag = document.createDocumentFragment();
  items.map(function(result) {
    var item = result.value;
    var card = intl.substitute(template, item);
    var elem = document.createElement("div");
    elem.innerHTML = card;
    // This is a technique to turn a DOM string to a DOM element.
    var target = elem.firstChild;
    docFrag.appendChild(target);
    target.addEventListener("dragstart", function(event) {
      var id = event.currentTarget.getAttribute("data-itemid");
      event.dataTransfer.setData("text", id);
    });
  });
  document.querySelector(".cards-list").appendChild(docFrag);
  ...
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
promiseUtils.eachAlways(portalItems).then(function(items) {
  ...
  view.container.addEventListener("dragover", function(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = "copy";
  })
  view.container.addEventListener("drop", function(event) {
    var id = event.dataTransfer.getData("text");
    // Get the first item that matches
    var resultItem = items.find(function(x) { return x.id === id; });
    var item = result.value;
    if (item && item.isLayer) {
      Layer.fromPortalItem({
        portalItem: item
      }).then(function(layer) {
        webmap.add(layer);
        view.extent = item.extent;
      });
    }
  })
});