如何在 React 中拖动从数据库中获取的图片？

问题描述

大家好，我在 React 中制作了一个白板，您可以在其中搜索图片并将其拖到白板上，也可以在白板上绘图。如果我使用文件夹中的图片源，则拖动本身有效。但是当它来自数据库（我使用 sql）时，我不能再拖动图片了。代码如下：

总结一下，基本上在 ComponentDidmount 中我放了 jquery 代码，以便您可以拖动图像，而在 render() 部分中是加载图片的位置，以便您可以拖动它。

class Container extends React.Component
{
  
    state ={
        data:[]
      }
    
    
        fetchData= async()=>{
            const response = await fetch('http://localhost:5000/user');
            const users = await response.json();
            this.setState({data: users});
        
        }
    
 
    
    
    componentDidMount() {
        this.fetchData();
        $(function(){  
            //Make every clone image unique.  
              var counts = [0];
               var resizeOpts = { 
                 handles: "all",autoHide:true
               };    
              $(".dragImg").draggable({
                                    helper: "clone",//Create counter
                                    start: function() { counts[0]++; }
                                   });
           
           $("#dropHere").droppable({
                  drop: function(e,ui){
                          if(ui.draggable.hasClass("dragImg")) {
                $(this).append($(ui.helper).clone());
              //Pointing to the dragImg class in dropHere and add new class.
                    $("#dropHere .dragImg").addClass("item-"+counts[0]);
                       $("#dropHere .img").addClass("imgSize-"+counts[0]);
                           
              //Remove the current class (ui-draggable and dragImg)
                    $("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");
           
           $(".item-"+counts[0]).dblclick(function() {
           $(this).remove();
           });     
               make_draggable($(".item-"+counts[0])); 
                 $(".imgSize-"+counts[0]).resizable(resizeOpts);     
                  }
           
                  }
                 });
           
           
           var zIndex = 0;
           function make_draggable(elements)
           {    
               elements.draggable({
                   containment:'parent',start:function(e,ui){ ui.helper.css('z-index',++zIndex); },stop:function(e,ui){
                   }
               });
           }    
           
           
               
              });
    }
    
    

    changeColor(params) {
        this.setState({
            color: params.target.value
        })
    }

    changeSize(params) {
        this.setState({
            size: params.target.value
        })
    }
    
    render() {
    
        return (
            
                    <div className="container">
                        <div className="tools-section">
                            <div className="color-picker-container">
                                Select Brush Color : &nbsp; 
                                <input type="color" value={this.state.color} onChange={this.changeColor.bind(this)}/>
                            </div>

                            <div className="brushsize-container">
                                Select Brush Size : &nbsp; 
                                <select value={this.state.size} onChange={this.changeSize.bind(this)}>
                                    <option> 5 </option>
                                    <option> 10 </option>
                                    <option> 15 </option>
                                    <option> 20 </option>
                                    <option> 25 </option>
                                    <option> 30 </option>
                                </select>
                            </div>

                        </div>
                
                        <div className="board-container">
                            
                            
                        
                            <h4>Select picture!</h4>
                        
                                
                                   
                                    <FlatList
                                    data={this.state.data}
                                    keyExtractor={(item,index) => index.toString()}
                                    renderItem={({item}) =>
                                        
                                    <View style={{backgroundColor:'#abc123',padding:10,margin:10}}>
                                        <div class="dragImg"><img src={item.picture} class="img"/></div>
                                       
                                        
                                        </View>
                                
                                    }
                                    
                                    />
                                
                    
                        
                        
                            <div id="dropHere"><Board color={this.state.color} size={this.state.size}></Board></div>
                            
                        </div>
                    
                    </div>
           
        );
    }

    
}



export default Container

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）