This is my second article about getting started

The preface

Pick up where I left off to complete my requirements. Detailed address https://juejin.cn/post/6981320873730899975 I finished after a contraction can be drag and drop the box, led by new instructions again, he wants to position to fine-tuning of the keyboard, because some boxes are too hours, the mouse drags, bad adjustment. Well. I nodded silently: Ok. But in this article, I still want to pick up where I left off, and finally finish this new requirementCopy the code

Step 4 Bind events to each box (avoid dragging multiple boxes and not knowing which box to adjust)

Every time I right-click and create a new box, I initialize a location and push a message in the global variable myData, and the little div box in the component is looped around like this in my div

GetSpanStyle (item, index) {return {width: '${item.w}px', height: '${item.h}px', top: `${item.y}px`, left: `${item.x}px` } }Copy the code

The way to bind the event of a single div, and I’m doing it when I click, and I get what box the div is currently clicking on, and I bind a click event init() and all that this function does is get what box the current click is modifying, and then I’m gonna take the previous mouse, The keyboard event is bound to the clicked div (this seems silly, but it’s all MY brain can think of)

Just a snippet of code:

Step 5: Add a keyboard event to control div size (new requirements change)

I’m going to modify my binding events. Previously, I only listened for events with the keyboard code of 38 (w), but I thought I was editing the div when I held down w, so I added listening for the keyboard up, down, left, and right. After holding down W, I set the global variable edit to true. Then click the top, bottom, left and right of the keyboard to increase or decrease the size of divs. This is my general idea. Specific implementation, is some simple events splicing, splicing should pay attention to, there is a problem, keyboard up and down around the default event, then to prohibit.

The key code to do this is as follows:

If (event && (event. KeyCode = = 40 | | event. The keyCode = = 37 | | event. The keyCode = = 39 | | event. The keyCode = = 38)) {/ / down, left, right, Var keyValue = event.keycode // console.log(event, keyValue) if(edit) { const top = Number(rec.style.top.split('px')[0]) const left = Number(rec.style.left.split('px')[0]) Var difTop = ~~top var difLeft = left if(keyValue == 40) {difTop += 1} else if(keyValue == 38){difTop -= 1 } else if(keyValue == 37) {difLeft -= 1} else if(keyValue == 39) {rec.style.top = difTop+ 'px' rec.style.left = difLeft+ 'px' this.mydata[itemIndex].x = difLeft this.mydata[itemIndex].y = difTop } }Copy the code

rendering

Conclusion:

This requirement, in fact, requires the technology is not very difficult, just a few simple mouse and keyboard events, but when they pile up together, it is inevitable that there will be some unpredictable situation, endless learning, I hope to have new ideas when I look at this pile of code next time.

The source code address: not yet available.