我是REACT JS的新手。我想製作一個拖放式反應組件。我已經創建了可完美運行的Draggable組件。但是我在創建Droppable組件時遇到困難。我從JqueryUI獲取Draggable和Droppable組件。想使用React Js創建拖放組件
感謝
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>
嘿,我有一個類似的情況,但在我的情況下,droppable無法正確識別。你可以請看看這個:http://stackoverflow.com/questions/41578861/jquery-droppable-is-not-recognizable-though-draggable-works-perfectly-fine,讓我知道如果你有任何想法? –