Question

我是REACT JS的新手。我想制作一个Drag and Drop React组件。我已经创建了可以完美运行的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

是!!最后，我找到了答案

$(".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。如果您需要更多帮助，请告诉我。

想要使用React Js创建拖放组件

2 个答案: