如何使js textarea可拖动

Question

我有一个用下面的js代码生成的textarea，我还有一个按钮，当单击该按钮时，它会创建其他文本区域，我需要使每个文本区域都可拖动，通常，因为“ id”是“ myForm”，因此应该使用jQuery $（'＃myForm'）但它不起作用，我尝试了所有形式，但它不起作用。我也有类似的问题，但没有运气...如果有人可以帮助我，我将不胜感激。在文件夹中，我有HTML，css和所有可以正常工作的jquery库。我选中了警告框。

注：我需要的是一个文本区域，它带有一个按钮以添加尽可能多的其他文本区域，并且该区域是可拖动的，生成该文本区域的代码可以是任何代码。如果有更简单的方法可以完成相同的事情，请先谢谢您。

function myFunction() {
    var x = document.createElement("FORM");
    x.setAttribute("id", "myForm");
    document.body.appendChild(x);

    var y = document.createElement("TEXTAREA");
    document.getElementById("myForm").appendChild(y);
}

Answer 1

HTML5 Drag and Drop是您要找的吗？

您需要做的就是在元素中定义draggable=true并编写相关的ondragstart和ondragend逻辑。这适用于普通JS和React之类的框架。

Answer 2

为您服务，但是在此编辑器中不起作用

 var new_offset = {top:30, left:40};
	var new_width = 200;
	var new_height = 150;
	var newElement$ = $('<div><textarea id="textarea"></textarea></div>')
                                    .width(new_width)
						   			.height(new_height)
                                    .draggable({
                                        cancel: "text",
                                        start: function (){
                                            $('#textarea').focus();
                                         },
                                        stop: function (){
                                            $('#textarea').focus();
                                         } 
                                     })
                                    .resizable()
									.css({
											'position'	        : 'absolute',
											'background-color'  : 'gray',
											'border-color'      : 'black',
											'border-width'      : '1px',
											'border-style'	    : 'solid'
								     })
									 .offset(new_offset)
						             .appendTo('body');

textarea {
    height:100%;
    background-color:whit;
    width:100%;
    resize:none; border:none;
    padding:0px; margin:0px;
    
}
div { padding:0px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

Answer 3

我的问题没有答案，所以我砍了它，然后用猪尾巴拖到span元素，这样span元素很容易用jquery拖拽，textarea不可拖拽，但是必须跟随span元素THUS拖拽。 >

span元素具有class =“ drag”，然后我使用了jQuery $（'。drag'）。draggable，这使整个过程变得棘手。脏代码，但是它以我所需的方式100％工作。

非常感谢您有机会在您的论坛中发帖。

我要感谢DartiCode，他确实竭尽全力帮助我，因此，对此工作表示赞赏。

谢谢大家在StackOverflow。

Answer 4

欢迎您，但是我的作品效果更好，使用起来更受赞赏，感谢您的来信而且当然就像我答应的，即使您问别人是否有jquery的答案，我也会在venilajs中重新制作它，所以只要给我一个调用您的代码，就可以使它成为纯venial js顺便说一句，我是前黑客[]

编辑：我再也没有做过，然后隐藏了我的IP大声笑，但无论如何，我很高兴为您服务，是的，我在我的朋友iMac上，所以这就是为什么我使用此来宾帖子大声笑