fidel fidel - 6 months ago 21
Javascript Question

display text inside a draggable

I would like to know how I can display text from a

textarea
into a draggable.

I have multiple text areas and draggables. My problem is when I try to upload a text from any text area, it is displayed in all the draggables.

How can i do this? I tried the
data
attribute and it still doesn't work. All I want is to display text inside a corresponding draggable. Please help.



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">




Answer

Your question is kind of unclear, but I believe you're asking how to create a number of draggable elements without having to deal with two foreach bindings: one for the inputs, one for the draggable elements.

You need to create one list of objects. Each object has an observable property that holds its own label.

EDIT: Trying to include the other requirements (as they're slowly becoming clear)...

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>

Comments