想使用React Js創建拖放組件

Question

我是REACT JS的新手。我想製作一個拖放式反應組件。我已經創建了可完美運行的Draggable組件。但是我在創建Droppable組件時遇到困難。我從JqueryUI獲取Draggable和Droppable組件。

感謝

var PivotTable = React.createClass({ 
    getInitialState: function(){ 
     return{ 
      selectedItems: this.props.selectedItems 

     } 
    }, 
    componentDidMount: function(){ 
     $(".drag-colum").draggable({cursor: "move", placeholder: "ui-state-highlight"}); 
     $(".drag-colum").on("dragstop", this.dragsChanged); 
    }, 
    render: function(){ 
     var draggable = this.state.selectedItems.map(function(item,index){ 
      return(
       <div className="pivotlength"> 
       <li key={index} className="ui-widget-content drag-colum" data-table={item.level} data-column={item.column}> 
       <span className="column-span">{item.column}</span>                   
       <span className="level-span">{item.level}</span> 
       <p> drag me to the target</p> 
       </li> 
       </div>  
       ); 
       }.bind(this)); 
      return(
      <div> 
      <ul id="draggable" > 
       {draggable} 
      </ul> 
       <div class = "row"> 
       <li className="ui-widget-header" id="droppable">Row</li> 
       <li className="ui-widget-header" id="droppable">Column</li> 
       <li className="ui-widget-header" id="droppable">Data</li> 
       <li className="ui-widget-header" id="droppable">Pages</li> 
      </div> 
      ) 
     } 
});   

var test = function(event){ 
    console.log(event); 
} 

var selectedItems = [{"column":"browser_ip","level":"order","relation":"one","custom_name": "Browser IP","item":{"dtype":"string","id":"browser_ip","type":"normal","name":"Browser IP","desc":"<p>The IP address of the browser used by the customer when placing the order.</p>"}},{"column":"email","level":"order","relation":"one","custom_name": "Email","item":{"dtype":"string","id":"email","type":"normal","name":"Email","desc":"<p>The customer's email address. Is required when a billing address is present.</p>"}},{"column":"name","level":"order","relation":"one","custom_name": "Name","item":{"dtype":"string","id":"name","type":"normal","name":"Name","desc":"<p>The customer's order name as represented by a number</p>"}},{"column":"order_number","level":"order.line_items","relation":"one","custom_name": "","item":{"dtype":"integer","id":"order_number","type":"normal","name":"Order Number","desc":"<p>A unique numeric identifier for the order. This one is used by the shop owner and customer. This is different from the id property, which is also a unique numeric identifier for the order, but used for API purposes.</p>"}},{"column":"currency","level":"order.line_items","relation":"one","custom_name": "","item":{"dtype":"string","id":"currency","type":"normal","name":"Currency","desc":"<p>The three letter code (ISO 4217) for the currency used for the payment.</p>"}}]; 

React.render(<PivotTable selectedItems={selectedItems} handleSelected={this.test} />, document.getElementById("container")); 

</script> 

<script> 
$(document).ready(function(){ 
}); 
</script> 

Answer 1

Yes.Finally我findout答案

$(".droppable").droppable({ 
     accept: ".drag-colum", 
       drop: function(event, ui) { 
       $(this).addClass("highlight-me"); 
       console.log(event.target.innerHTML, "-", ui.draggable[0].attributes["data-column"].value); 
       }, 
       out: function(event, ui) { 
       $(this).addClass("highlight-me"); 
       console.log(event.target.innerHTML, "-", ui.draggable[0].attributes["data-column"].value); 
       } 
    }); 

我只是在我的ComponentDidmount功能添加這個功能，現在的工作。

Answer 2

您是否嘗試過使用this？我已經在一個項目中使用了它，並且在圖庫中拖放圖像時效果很好。還請檢查我的repo我在哪裏使用這個。讓我知道你是否需要更多的幫助。