聚合物2.0 - 試圖實現HTML5拖放

我想實現HTML5拖放進行類似的阻力polymer2.0組件拖放選項，如http://jsfiddle.net/U55rc/聚合物2.0 - 試圖實現HTML5拖放

HTML：

<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-flex-layout/v2.0.0/iron-flex-layout/"> 
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script> 
<link rel="import" href="iron-flex-layout-classes.html"> 
<dom-module id="demo-element"> 
    <template> 
    <style include="shared-styles"> 
     :host { 
     display: block; 

     padding: 10px; 
     } 

    .card { 
     margin: 24px; 
     padding: 16px; 
     color: #757575; 
     border-radius: 5px; 
     background-color: #fff; 
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); 
     } 
    </style> 


    <div draggable="true" ondragstart="{{drag(event)}}" > 
    Input: 
    <input type="text"/> 
    </div> 
       <div class="card" id="div1" ondrop="{{drop(event)}}" ondragover="{{allowDrop(event)}}"></div> 
    </template> 

    <script> 
    Polymer({ 
     is: 'demo-element', 
     allowDrop:function(ev){ 
      ev.preventDefault(); 
     }, 
     drag: function(ev){ 
      ev.dataTransfer.setData("text",ev.target.id); 
     }, 
     drop:function(ev){ 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("text"); 
      console.log(ev) 
      ev.target.appendChild(document.getElementById(data)); 
     } 
    }); 

    </script> 
    <script>Polymer({is: "demo-element"});</script> 
</dom-module> 
<demo-element></demo-element>

JSFiddle僅供參考： https://jsfiddle.net/Nagasai_Aytha/b62to481/

來源

2017-07-03 Naga Sai A

此處的關鍵是對本機HTML5拖放事件使用on-<event>表示法。另外，您不需要事件的數據綁定符號。

這裏是你糾正的標記。

HTML：

<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-flex-layout/v2.0.0/iron-flex-layout/"> 
    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> 
    <link rel="import" href="iron-flex-layout-classes.html"> 
    <dom-module id="demo-element"> 
     <template> 
     <style include="shared-styles"> 
      :host { 
      display: block; 

      padding: 10px; 
      } 

     .card { 
      margin: 24px; 
      padding: 16px; 
      color: #757575; 
      border-radius: 5px; 
      background-color: #fff; 
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); 
      } 
     </style> 


     <div id="draggedDiv" draggable="true" on-dragstart="drag" > 
     Input: 
     <input type="text"/> 
     </div> 
        <div class="card" id="div1" on-drop="drop" on-dragover="allowDrop"></div> 
     </template> 

     <script> 
     Polymer({ 
      is: 'demo-element', 
      allowDrop:function(ev){ 
       ev.preventDefault(); 
      }, 
      drag: function(ev){ 
       ev.dataTransfer.setData("text",ev.target.id); 
      }, 
      drop:function(ev){ 
       ev.preventDefault(); 
       var data=ev.dataTransfer.getData("text"); 
       console.log(ev) 
       ev.target.appendChild(this.shadowRoot.querySelector('#' + data)); 
      } 
     }); 

     </script> 
     <script>Polymer({is: "demo-element"});</script> 
    </dom-module> 
    <demo-element></demo-element>

來源

2017-07-17 09:48:31 istvank

我更新的jsfiddle和它不工作要麼 - https://jsfiddle.net/Nagasai_Aytha/adq1qxr9/2/ –

對，更新了標記和代碼。有兩個缺陷：首先，拖動div的id沒有設置，所以drag（）方法中的ev.target.id返回一個空字符串。另一個問題是document.getElementById沒有返回拖動的div。將其更改爲Polymer 2.0特定的this.shadowRoot.querySelector（'＃'+ data）。 – istvank

聚合物2.0變化到this.$$this.shadowRoot.querySelector：

drop (ev){ 
     ev.preventDefault(); 
     var data=ev.dataTransfer.getData("text"); 
     ev.target.appendChild(this.shadowRoot.querySelector('#' + data)); 
    }

來源

2017-07-19 12:50:23 BoefAE

聚合物2.0 - 試圖實現HTML5拖放

回答

相關問題