css部分

* {

margin: 0;

padding: 0;

}

.wallpaper {

width: 800px;

margin: 50px auto;

}

.dragTextBox {

position: absolute;

background: #d6e5ff;

padding: 2px 6px;

border-radius: 5px;

display: none;

left: -50px;

top: -300px;

}

.input {

width: 100%;

height: 40px;

}

HTML部分

JavaScript

class zjDragEvent {

constructor(id, input) {

this.ul = document.querySelector(id);

this.input = document.querySelector(input).children[0];

this.falg=false;

this.init();

}

init() {

var _this = this;

var dragBox = document.querySelector("#dragTextBox");

this.ul.addEventListener('mousedown', function (e) {

_this.flag=true;

e.preventDefault();

var target = e.target || e.srcElement;

dragBox.innerHTML = target.innerHTML;

dragBox.style.display = "block";

})

document.addEventListener('mousemove', function (e) {

if(_this.flag){

var e = e || window.event;

var left = event.clientX;

var top = event.clientY;

dragBox.style.left = left + "px";

dragBox.style.top = top + "px";

}

})

this.input.addEventListener('mouseover', function () {

dragBox.style.backgroundColor = "#cffbe5";

})

this.input.addEventListener('mouseout', function () {

dragBox.style.backgroundColor = "#d6e5ff"

})

this.input.addEventListener('mouseup', function () {

var text = dragBox.innerHTML;

if (text == "") return false;

var value = this.value;

if (value.indexOf(text) == -1) {

this.value = value + text + "；";

}

})

document.addEventListener('mouseup', function () {

_this.flag=false;

dragBox.innerHTML = "";

dragBox.style.display = "none";

})

}

}

var dragone = new zjDragEvent("#consult", "#variable");