如何使 js textarea 可拖动答案

【问题标题】：how to make a js textarea draggable如何使 js textarea 可拖动
【发布时间】：2020-01-28 23:34:11
【问题描述】：

我有一个使用下面的 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);
}

【问题讨论】：

标签： html textarea

【解决方案1】：

HTML5 Drag and Drop 是您要找的吗？

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

【讨论】：

你告诉我的是创建一个可拖动的区域，可以将其他元素拖入其中......我拥有的是一个文本区域和一个添加额外文本区域的按钮......现在我需要做这个textareas 可拖动，CodeArtic 尝试帮助我，但他给我的代码将所有文本区域拖动到同一个地方，我需要能够单独拖动每个文本区域。谢谢
我的意思是，当您在myFunction() 中创建文本区域时，您可以为其添加draggable=true 属性并为这些相关区域指定相关的ondragstart 和ondragend 逻辑。

【解决方案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>

【讨论】：

上面的代码可以工作，但它使附加的文本区域与第一个文本区域一起拖动。每个文本区域如何单独拖动？
谢谢 DarticCode，更好的解决方案是让代码为生成的每个新文本区域动态创建一个新 id，其他方式就像没有必要进入 html 文件和手动执行此操作...我非常感谢您的帮助。谢谢。
我是新来的，也许你没有得到荣誉，因为你的答案不完整并且问题没有结束。
当然我整天都在努力，提前感谢您的努力。！
成品外观只需要 jquery ui 和 jquery 但它可以工作!!!!!!!!!

【解决方案3】：

我破解了它并用这种方式将它拖到一个 span 元素上，span 元素很容易用 jquery 拖动，textarea 不可拖动，但它必须跟随 span 元素，因此是可拖动的。

span 元素有 class="drag"，然后我使用了 jquery $('.drag').draggable，这就是整个技巧。肮脏的代码，但它 100% 按我需要的方式工作。

【讨论】：