javascript - 在可拖动中插入图像

Question

我如何在多个单独的可拖动对象中插入多个图像我遇到的问题是，当我插入两个或多个图像时，我无法将可拖动对象中的图像分开，它们被“卡住”，它们被一起拖动。由于某种原因，代码根本不起作用，但它在我的网站上确实有效

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>&nbsp;&nbsp;&nbsp;
        <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>

Answer 1

您的“可拖动”绑定(bind)位于 foreach: items 内的元素上。因此，如果您想要可拖动的图像，您应该确保将图像数据推送到 items 中。

您实际上在做的是将图像附加到此可拖动容器内的嵌套元素(使用 jQuery)。

要将其转换为“knockout 方法”，您必须:

<强>1。将您的 View 模型实例公开给您的 fileReader，例如:

将它放在 window 中(显然不是最好的解决方案):

var vm = new vm();`
ko.applyBindings(vm);

<强>2。准备好后将图像源推送到 vm.items，例如:

在您的onloadend 方法中:

reader.onloadend = function(e) {
  // ...
  // make an image and append it to the div
  vm.items.push(e.target.result);
  // ...
};

<强>3。在您的可拖动容器中创建一个 src 属性数据绑定(bind):

例如:

<div data-bind="foreach:items">
  <div data-bind="draggable:true, droppable:true">
    <img data-bind="attr: {src: $data }" />
  </div>
</div>

我在下面包含了一个快速修复的版本，但我建议您要么重写一些逻辑并尽可能多地摆脱 jQuery 代码，要么重新考虑是否需要 knockout 。

通常，当您在元素中包含 knockout 时，您不应该影响 DOM，除非它是通过 knockout 自定义绑定(bind)。在 knockout 的背后搞乱 DOM 很可能最终会给你带来麻烦。

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();
}

var vm = new vm();
ko.applyBindings(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
  vm.items.push(e.target.result);

  // 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>&nbsp;&nbsp;&nbsp;
<button data-bind="click: addNew">Create</button>

<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">
        <img data-bind="attr: {src: $data }" />
      </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>