gpt4 book ai didi

javascript - 在可拖动对象内显示文本

转载 作者:行者123 更新时间:2023-12-03 06:56:25 24 4
gpt4 key购买 nike

我想知道如何将文本从 textarea 显示到可拖动对象中。

我有多个文本区域和可拖动对象。我的问题是,当我尝试从任何文本区域上传文本时,它会显示在所有可拖动对象中。

我该怎么做?我尝试了 data 属性,但它仍然不起作用。我想要的只是在相应的可拖动对象中显示文本。请帮忙。

var z = 1; //value to make div overlappable

$('#addText').click(function (e) {
/** Make div draggable **/
$('<div />', {
class: 'ui-widget-content',
appendTo: '.container',
draggable: {
containment: 'parent',
start: function( event, ui ) {
$(this).css('z-index', ++z);
}
}
});
});

$(document).on("dblclick", '.text', function()
{
$(this).hide(); $(this).closest('.item').find('.edit_text').val($(this).text()).show();
});

$(document).on("click", ".edit_text", function()
{
return false;
});


$(document).on("click", function()
{
var editingText = $('.edit_text:visible');
if (editingText.length)
{
editingText.hide();
editingText.closest('.item').find('.text').text($(editingText).val()).show();
}
});

ko.bindingHandlers.draggable={
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).draggable();
}
};

var vm = function() {
var self=this;
self.items=ko.observableArray();
self.textContent1 = ko.observable('');
self.textContent2 = ko.observable('');
self.textContent3 = ko.observable('');
self.init = function() {
self.items([]);
}
self.remove = function(item) {
console.log(item);
self.items.remove(item);
}
self.addNew = function() {
var content = [
self.textContent1(),
self.textContent2(),
self.textContent3()
].filter(function(item) {
return item !== ''
});
content.forEach(function(item) { self.items.push(item); })
self.textContent1('');
self.textContent2('');
self.textContent3('');
}
}

ko.applyBindings(new vm());
<br/>
<div class="item1">
<textarea data-fid="hello" data-bind="value: textContent1" Placeholder="Type text to append"></textarea>
</div>
<div class="item2">
<textarea data-fid="hello2" data-bind="value: textContent2" Placeholder="Type text to append"></textarea>
</div>
<div class="item3">
<textarea data-bind="value: textContent3" Placeholder="Type text to append"></textarea>
</div>
<button data-bind="click: addNew">Generate New Div</button>

<div class="container">
<div data-bind="foreach:items" class="fix_backround">
<div href="#" class="item1" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">[x]</span>
<br/>
<br/>
<center>
<span class="text" data-fid="hello" data-bind="text:$data"></span><input class="edit_text"/>
</center>
</div><div href="#" class="item2" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">[x]</span>
<br/>
<br/>
<center>
<span class="text" data-bind="text:$data"></span><input class="edit_text"/>
</center>
</div>
</div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script><link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">

最佳答案

你的问题有点不清楚,但我相信你问的是如何创建多个可拖动元素,而不必处理两个 foreach 绑定(bind):一个用于输入,一个用于可拖动元素。

您需要创建一个对象列表。每个对象都有一个可观察的属性,该属性包含自己的标签。

编辑:尝试包含其他要求(因为它们正在慢慢变得清晰)...

ko.bindingHandlers.draggable = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).draggable();
}
};


var vm = function() {
var self = this;

self.draggableItems = ko.observableArray();
self.addDraggable = function() {

self.draggableItems.push({
style: {
padding: "1rem",
position: "absolute",
background: "rgba(0,0,255,0.5)"
},
label: ko.observable("Draggable nr. " + self.draggableItems().length)
});

};

}

ko.applyBindings(new vm());
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<button data-bind="click: addDraggable">Add new draggable</button>

<div data-bind="foreach: draggableItems">

<div style="display: inline-block">
<textarea data-bind="value: label, valueUpdate: 'keyup'"></textarea>
</div>

<div data-bind="draggable: true, style: style">
<div data-bind="text: label"></div>
</div>

</div>

关于javascript - 在可拖动对象内显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37258966/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com