0
我怎麼能插入多個圖像在多個單獨的draggables im問題是，我不能分開拖動內的圖像，當我插入兩個或更多他們被「卡住」，他們被拖在一起。 由於某種原因，代碼不工作，但它的工作在我的網站 插入圖像拖動
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', '.img', function()
{
$(this).hide(); $(this).closest('.item').find('.edit_text', '.img').val($(this).text()).show();
});
$(document).on("click", ".edit_text", ".img", function()
{
return false;
});
$(document).on("click", function()
{
var editingText = $('.edit_text:visible');
if (editingText.length)
{
editingText.hide();
editingText.closest('.item').find('.text', '.img').text($(editingText).val()).show();
}
});
var count = 1;
var selectedDraggable;
ko.bindingHandlers.draggable={
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).draggable();
$(element).addClass('item' + count);
count++;
$(element).on('click', function() {
selectedDraggable = $(this);
})
}
};
var vm=function(){
var self=this;
self.items=ko.observableArray();
self.textContent = ko.observable('');
self.init=function(){
self.items([]);
}
self.remove=function(item){
console.log(item);
self.items.remove(item);
}
self.addNew = function() {
self.items.push(self.textContent());
self.textContent('');
}
self.init();
}
ko.applyBindings(new vm());
var reader = new FileReader(),
i = 0,
numFiles = 0,
imageFiles;
// use the FileReader to read image i
// pass `File` at index `i` within `FileList` to `readFile`
function readFile(file) {
reader.readAsDataURL(file)
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
// increment `i`
++i;
// make an image and append it to the div
var image = $('<img>').attr('src', e.target.result);
$(image).appendTo('#images');
// if there are more files run the file reader again
if (i < numFiles) {
// pass `File` at index `i` within `FileList` to `readFile`
readFile(imageFiles.item(i));
}
};
$('#go').click(function() {
i = 0;
imageFiles = document.getElementById('files').files
// get the number of files
numFiles = imageFiles.length;
// pass first `File` to `readFile`
readFile(imageFiles.item(i));
});.container {
width: 500px;
height: 500px;
border: 2px solid;
position: relative;
overflow: auto;
}<textarea data-bind="value: textContent" Placeholder="Type text to append" rows="4" cols="21"></textarea>
<button data-bind="click: addNew">Create</button></p>
<center> <input type="file" multiple id="files" />
<button id="go" data-bind="click: addNew">Create</button>
<div class="container">
<div data-bind="foreach:items" class="fix_backround">
<div href="#" class="item" 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"/><div class="img" id="images"></div></center>
</div></div></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.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>
<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
如果你保持代碼的修剪和良好的格式化這將有助於。同樣適用於文本，一些交互和大寫會使它更容易理解。 – Jeroen