After adding draggable attribute, the contents of the input cannot be selected with the mouse-CodePudding

 & lt; ! DOCTYPE html> 
 
 
<meta charset="utf-8" & gt; 
 Test 
 
<body> 
A1: & lt; Input type="text" name="a1" draggable="true" value="https://bbs.csdn.net/topics/aaa" & gt; 
 
A2: & lt; Input type="text" name="a2" draggable="true" value="https://bbs.csdn.net/topics/bbb" & gt;

As title, the code above, after adding draggable attribute in the input content cannot be selected with the mouse,
How to solve this problem, there is a great god give a solution?

CodePudding user response:

Drag and choice behavior have conflict, I have an alternative method, you see is not applicable,
Trigger div drag events in front of the input text, click when text, div into can drag, when mouse release, div into not drag,

CodePudding user response:

reference 1st floor ambit_tsai response:

drag and choice behavior have conflict, I have an alternative method, you see is not applicable,
Trigger div drag events in front of the input text, click when text, div into can drag, when mouse release, div into not drag,
 
 
 

Thank you for your answer, although this method directly select input the contents of the can, but I'm a drag div, that is, when the [a1], it can no longer use the mouse to select the input content,
Do you have any other methods?

CodePudding user response:

refer to the second floor peekding response:

Quote: refer to 1st floor ambit_tsai response:

Drag and choice behavior have conflict, I have an alternative method, you see is not applicable,
Trigger div drag events in front of the input text, click when text, div into can drag, when mouse release, div into not drag,

Thank you for your answer, although this method directly select input the contents of the can, but I'm a drag div, that is, when the [a1], it can no longer use the mouse to select the input content,
Do you have any other methods?

Are you div ondragend attribute is not set, because after the drag, have to put the div dragable return false, in this way can input to choose words,

CodePudding user response:

reference ambit_tsai reply: 3/f

Quote: refer to the second floor peekding response:

Quote: refer to 1st floor ambit_tsai response:

Drag and choice behavior have conflict, I have an alternative method, you see is not applicable,
Trigger div drag events in front of the input text, click when text, div into can drag, when mouse release, div into not drag,

Thank you for your answer, although this method directly select input the contents of the can, but I'm a drag div, that is, when the [a1], it can no longer use the mouse to select the input content,
Do you have any other methods?

Are you div ondragend attribute is not set, because after the drag, have to put the div dragable return false, in this way can input to select text,

I didn't do it, I need to implement drag were the effect of the content of an input to another input, so you need to set on the input draggable="true", to achieve the effect of drag,
And this is IE11 do,
Is there a better way?

CodePudding user response:

reference 4 floor peekding response:

I don't do so, I need to implement is the effect of drag the contents of an input to another input, so need to set on the input draggable="true", to implement the drag effect,
And this is IE11 do,
Is there a better way?

Drag the content, what all need not add

CodePudding user response:

1. The first in the vue program to create a js file eg: dialog. Js
The import Vue from 'Vue'
//v - dialogDrag: Windows drag-and-drop attribute
Vue. Directive (' dialogDrag '{
Bind (el, binding, vnode, oldVnode) {
//custom attributes, determine whether can drag
if (! The binding. The return value)
Const dialogHeaderEl=el. QuerySelector (' el - dialog__header ')
Const dragDom=el. QuerySelector (' el - dialog ')
DialogHeaderEl. Style. CssText +='; cursor:move; '
DragDom. Style. CssText +='; top:0px; '

//get the original properties ie dom elements. CurrentStyle firefox window. Google getComputedStyle (dom elements, null);
Const sty=(function () {
If (document. Body. CurrentStyle) {
//under the ie compatible writing
Return (dom, attr)=& gt; Dom. CurrentStyle [attr]
} else {
Return (dom, attr)=& gt; GetComputedStyle (dom, false) [attr]
}
}) ()

DialogHeaderEl. onm ousedown=(e)=& gt; {
//mouse press, calculate the current element distance visual area distance
Const disX=e.c. with our fabrication: lientX - dialogHeaderEl. OffsetLeft
Const disY=e.c. with our fabrication: lientY - dialogHeaderEl. OffsetTop

Const screenWidth=document. Body. ClientWidth//body width of current
Const screenHeight=document. DocumentElement. ClientHeight//visible region height (should be the body height, some environment cannot obtain)

Const dragDomWidth=dragDom. OffsetWidth//dialog width
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull