Question

我正在一个网站上工作，我必须实现便利贴功能。现在我有两种不同类型的便利贴，一种允许上传图片，另一种允许添加文字。我的图片是一张便条纸，但是我的文字不是。我看了一切，但我似乎无法找到原因。我在发布之前做了一些研究，所以我确信我不会发布同样的问题。 银色加号按钮用于可编辑的便利贴，蓝色用于图片。

这是我的代码链接： JSFiddle

我的问题似乎是这个代码（JSFiddle上的第28行）。

<div id="react-container"></div>
<script type="text/babel">
    var Note = React.createClass({
        getInitialState() {
            return {editing: false}
        },
        componentWillMount() {
            this.style = {
                right: this.randomBetween(0, window.innerWidth -150, 'px'),
                top: this.randomBetween(0, window.innerHeight -150, 'px')
            }
        },
        componentDidUpdate() {
            if (this.state.editing) {
                this.refs.newText.focus()
                this.refs.newText.select()
            }
        },
        shouldComponentUpdate(nextProps, nextState) {
            return this.props.children !== nextProps.children || this.state !== nextState
        },
        randomBetween(x, y, s) {
            return (x + Math.ceil(Math.random() * (y-x))) + s
        },
        edit() {
            this.setState({editing: true})
        },
        save() {
           this.props.onChange(this.refs.newText.value, this.props.id)
           this.setState({editing: false})
        },
        remove() {
            this.props.onRemove(this.props.id)
        },
        renderForm() {
            return (
                <div className="note" style={this.style}>
                    <textarea ref="newText" defaultValue={this.props.children}></textarea>
                    <button onClick={this.save}>SAVE</button>
                </div>
            )
        },
        renderDisplay() {
            return (
                <div className="note" style={this.style}>
                    <p>{this.props.children}</p>
                    <span>
                        <button onClick={this.edit}>EDIT</button>
                        <button onClick={this.remove}>X</button>
                    </span>
                </div>
               )
        },
        render() {
            return ( <ReactDraggable>
            {(this.state.editing) ? this.renderForm() : this.renderDisplay()}
            </ReactDraggable>
            )
        }
    })

    var Board = React.createClass({
        propTypes: {
            count: function(props, propName) {
                if(typeof props[propName] !== "number") {
                    return new Error("the count must be a number")
                } 

                if(props[propName] > 100) {
                    return new Error("Creating " + props[propName] + " notes is ridiculous you need to delete some to make more.")
                }   
            }
        },
        getInitialState() {
            return {
                notes : []
            }
        },

        nextId() {
            this.uniqueId = this.uniqueId || 0
            return this.uniqueId++
        },
        add(text) {
            var notes = [
                ...this.state.notes,
                {
                    id: this.nextId(),
                    note: text
                }
            ]                
            this.setState({notes})
        },
        update(newText, id) {
            var notes = this.state.notes.map(
                note => (note.id !== id) ?
                    note :
                    {
                        ...note,
                        note: newText
                    }
                )
            this.setState({notes})
        },
        remove(id) {
            var notes = this.state.notes.filter(note => note.id !== id)
            this.setState({notes})
        },
        eachNote(note) {
            return (<Note key={note.id} id={note.id} onChange={this.update} onRemove={this.remove}>{note.note}</Note>)
        },
        render() {
            return (<div className='board'>
                        {this.state.notes.map(this.eachNote)}
                        <button onClick={() => this.add('New Note')}>+</button>
                    </div>)
        }
    })

    ReactDOM.render(<Board count={10}/>,
        document.getElementById('react-container'))

</script>

我知道很难看到某人的其他代码，但如果可能的话，有人可以指出我正确的方向吗？现在，我尝试了一切，但到目前为止我的可编辑便利贴不可拖动。

Answer 1

您可以使用此代码使元素可拖动：

//Make the DIV element draggagle:
dragElement(document.getElementById(("mydiv")));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

来源：https://www.w3schools.com/howto/howto_js_draggable.asp

确保在CSS和HTML中正确连接JavaScript。

可拖动功能无法正常工作

1 个答案: