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部分
Convert HL7 to XMLConvert XML to HL7Convert X12 to XMLConvert XML to X12Convert EDI to XMLConvert XML to EDIConvert NCPDP to XMLConvert XML to NCPDP
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");
