Fix for issue #566 and mitigation for issue #556: data- and id are copied to DOM

Author: David-Desmaisons

example/components/two-list-headerslots.vue

@@ -3,7 +3,14 @@
     <div class="col-4">
       <h3>First draggable with header</h3>
 
-      <draggable :list="list" class="list-group" draggable=".item" group="a">
+      <draggable
+        id="first"
+        data-source="juju"
+        :list="list"
+        class="list-group"
+        draggable=".item"
+        group="a"
+      >
         <div
           class="list-group-item item"
           v-for="element in list"

src/vuedraggable.js

@@ -160,6 +160,14 @@ const draggableComponent = {
     const update = (name, value) => {
       attributes = buildAttribute(attributes, name, value);
     };
+    const attrs = Object.keys(this.$attrs)
+      .filter(key => key === "id" || key.startsWith("data-"))
+      .reduce((res, key) => {
+        res[key] = this.$attrs[key];
+        return res;
+      }, {});
+    update("attrs", attrs);
+
     if (this.componentData) {
       const { on, props } = this.componentData;
       update("on", on);

tests/unit/vuedraggable.spec.js

@@ -767,10 +767,51 @@ describe("draggable.vue when initialized with list", () => {
     expect(SortableFake.destroy.mock.calls.length).toBe(1);
   });
 
-  it("does not throw when sortable is not set", () => {
+  it("does not throw on destroy when sortable is not set", () => {
     delete vm._sortable;
     expect(() => wrapper.destroy()).not.toThrow();
   });
+
+  it("renders id as html attribute", () => {
+    wrapper = shallowMount(draggable, {
+      propsData: {
+        list: []
+      },
+      attrs: {
+        id: "my-id",
+      },
+      slots: {
+        default: "",
+      }
+    });
+
+    const element = wrapper.find("#my-id");
+    expect(element.is("div")).toBe(true);
+    expect(element.html()).toEqual(wrapper.html());
+  });
+
+  test.each([
+    ["data-valor", "a"],
+    ["data-valor2", "bd"],
+    ["data-attribute", "efg"]
+  ])(
+    "renders attribute %s with value %s as html attribute", 
+    (attribute, value) => {
+    wrapper = shallowMount(draggable, {
+      propsData: {
+        list: []
+      },
+      attrs: {
+        [attribute]: value,
+      },
+      slots: {
+        default: "",
+      }
+    });
+    const element = wrapper.find(`[${attribute}='${value}']`);
+    expect(element.is("div")).toBe(true);
+    expect(element.html()).toEqual(wrapper.html());
+  });
 })
 
 describe("draggable.vue when initialized with value", () => {