上传图片并在可拖动的内部显示

Question

我想知道如何在可拖动的内部显示图像。我有一些代码，但它不按我想要的方式工作。我想键入一些文本将其插入我的draggable，并单独能够上传图像并拖动它而不拖动文本。我想将图像上传到文件夹和数据库中的图像名称。请帮助我一直在寻找，但我找不到答案

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


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



     function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result)
                        .width(150)
                        .height(200);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:none;}   /* mouse over link */
a:active {text-decoration:none;}  /* selected link */
.toolbar { background-color: lightgrey;
    width: 490px;
    height: 23px;
    border: none;
	
	
    position: none;
    
}.item{
    width: 200px;
    height: 200px;
    padding: 0.5em;
    background:transparent;
    z-index: 1;
    display:block;
}

.edit_text
{
    display: none;
}

.fix_backround
{
    background-color: transparent;
}

.container {background-color: lightgrey;
    width: 500px;
    height: 500px;
    border: 2px solid;
    position: relative;
    overflow: auto;
}

  <p align="center">&nbsp;</p>
        <p align="center"><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>
        
        
        <p align="center"> <input type='file' onchange="readURL(this);" /></p>
       

<center>
<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"/></center>
  <img id="blah" src="#" alt="your image" /> </div></div>
</div></center>
<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><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>

<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script><!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Answer 1

我怀疑这段代码并不能完全符合你的要求，但你的问题很模糊，所以我无法确定应该发生什么。

无论如何，这是一个有效的例子：https://jsfiddle.net/Twisty/L81v3Ldh/3/

选择文件后，它会运行readURL($(this)[0]);，并且渲染的图像可以拖动。

如果您通过表单添加文本，则文本将附加到新div并附加。它也是可以拖延的。

<强> HTML

<p align="center">&nbsp;</p>
<p align="center">
  <textarea id="textContent" data-bind="value: textContent" Placeholder="Type text to append" rows="4" cols="21"></textarea>&nbsp;&nbsp;&nbsp;
  <button data-bind="click: addNew" id="addText">Create</button>
</p>
<p align="center">
  <input type='file' />
</p>
<center>
  <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" />
        </center>
        <img id="blah" src="#" alt="your image" /> </div>
    </div>
  </div>
</center>

我必须添加一些ID标记，以便JQuery可以正确执行。

<强>的jQuery

var z = 1; //value to make div overlappable
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah')
        .attr('src', e.target.result)
        .width(150)
        .height(200);
    };

    reader.readAsDataURL(input.files[0]);
  }
}
$(function() {
  $("input[type='file']").change(function() {
    readURL($(this)[0]);
    $("#blah").draggable({
      containment: '.container'
    });
  });
  $('#addText').click(function(e) {
    /** Make div draggable **/
    $('<div>', {
        id: 'text_' + count,
        class: 'ui-widget-content'
      })
      .html($("#textContent").val())
      .draggable({
        containment: 'parent',
        start: function(event, ui) {
          $(this).css('z-index', ++z);
        }
      })
      .appendTo('.container');
  });

  $(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();
    }
  });
  var count = 1;
  var selectedDraggable;
});

我不熟悉Knockout，它似乎没有正确加载。我怀疑它没有帮助你，但由于我不知道它应该做什么或如何使用它，我为这个例子评论了它。

欢迎评论或更新您的帖子，了解更多详情。