React Jを使用してドラッグアンドドロップコンポーネントを作成したい

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私はちょうど私のComponentDidmount機能で、この機能を追加し、それが動作するようになりまし答え

$(".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); 
       } 
    }); 

をfindout。

Answer 2

あなたはthisを使用してみましたか？私はこれをプロジェクトで使用しました。ギャラリーでドラッグアンドドロップすると非常にうまく機能しました。私がこれを利用する私のrepoもチェックしてください。ここでもう助けが必要な場合はお知らせください。