Javascript 将图像拖动到div单元格中

我正在写一个电子邮件模板生成器。如何在一个div单元格中拖动图像？ 实际上，我想将黄色和红色的div拖到主容器中，然后将图像拖到其中一个div单元格中

HTML是：

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<div class="container" style="width:900px;height:400px; border:solid 1px red;">

    drag here

  </div>

 <h2>From this list</h2>
<div id="toolBox" class="linked">

<div class="customeDraggable">
    <div style="border: solid 1px yellow; float: right; height: 150px; width: 50%"> 1 </div>
    <div style="border: solid 1px yellow; float: left; height: 150px; width: 49%"> 2 </div>
</div>

<div class="customeDraggable">
    <div style="border: solid 1px red; float: right; height: 150px; width:     33%"> 1 </div>
    <div style="border: solid 1px red; float: left; height: 150px; width: 33%"> 2 </div>
    <div style="border: solid 1px red; float: left; height: 150px; width: 33%"> 3 </div>
</div>


<div class="customeDraggable">
    <img src="http://icons.iconarchive.com/icons/artua/mac/128/Setting-icon.png" />
</div>


</div>

---

下面是一个关于

的示例，一旦您将黄色的

div

移动到红色，您必须更改div的类，以便能够通过拖动接收内容，而不仅仅是一个元素

---

另一方面，如果无法将图像拖到红色div中，则必须能够将其拖到黄色div中，并使用一个新类来实现此目的。

最后我找到了一个示例，现在只需对其进行自定义

html：

<ul class="widgets col-sm-2">
<li class="col-xs-6" data-type="grid-row" style="background-image: url(https://s3.amazonaws.com/jetstrap-site/images/builder/components/grid_row.png); background-repeat: no-repeat;" data-html='<div class="row"><div class="col-md-4 target"><h3>Span 4</h3><p>Content</p></div><div class="col-md-4 target"><h3>Span 4</h3><p>Content</p></div><div class="col-md-4 target"><h3>Span 4</h3><p>Content</p></div></div>'><a href="#">Grid Row</a>
</li>
<li class="col-xs-6" data-type="button" style="background-image: url(https://s3.amazonaws.com/jetstrap-site/images/builder/components/button.png); background-repeat: no-repeat;" data-html='<a href="#" class="btn btn-default">Default</a>'><a href="#">Button</a>
</li>
<li class="col-xs-6" data-type="heading" style="background-image: url(https://s3.amazonaws.com/jetstrap-site/images/builder/components/heading.png); background-repeat: no-repeat;" data-html='<h1>Heading 1</h1>'><a href="#">Heading</a>
</li>
<li class="col-xs-6" data-type="jumbotron" style="background-image:  url(https://s3.amazonaws.com/jetstrap-site/images/builder/components/hero_unit.png); background-repeat: no-repeat;"  data-html='<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for   calling  extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>'><a href="#">Jumbotron</a>
</li>

而js：

// Make all widgets draggable
$(".widgets li").draggable({
revert: "valid",
helper: "clone",
cursor: "move"
});



setDrop = function(targets) {
$(targets).droppable({
    accept: ".widgets li",
    greedy: true,
    drop: function (event, ui) {
        console.log(this);
        var el = $($(ui.helper[0]).data("html"));
        $(this).append(el);
        setDrop($(".target", el));
    }
});
};
setDrop($('.target'));

---

顺便说一句，jquery-UI.js、bootstrap.css和bootstrap.js是必需的

检查这一点，非常通用，但对您的情况有效：它有效，但如果我想得到那部分html，图像不在那里。检查我如何使用新下拉列表的beforeStop中的

beforeStop

中的UI.item，必须获取元素并将其保存在变量或其他位置

.widgets {
height: 800px;
background: #454443;
}
.widgets li {
float: left;
color: #fff;
list-style: none;
font-size: 13px;
font-weight: bold;
opacity: 0.85;
width: 125px;
padding-top: 75px;
text-align: center;
font-family:'ProximaNova-Regular', 'Helvetica Neue', Helvetica, Arial, sans-      serif;
}
.widgets li:hover {
background-color: #454443;
opacity: 1.0;
cursor: -webkit-grab;
}
.widgets li a:hover {
cursor: -webkit-grab;
}
.widgets li a {
color: #fff;
text-decoration: none;
text-shadow: none;
}
.widget {
width: 150px;
height: 150px;
margin: 15px;
}

.page {
  height: 800px;
border: thin solid red;
}

.page .row {
min-height: 50px;
}

.page .row div {
border-radius: 5px;
padding: 10px;
min-height: 30px;
border: 1px dotted #ccc;
}

// Make all widgets draggable
$(".widgets li").draggable({
revert: "valid",
helper: "clone",
cursor: "move"
});



setDrop = function(targets) {
$(targets).droppable({
    accept: ".widgets li",
    greedy: true,
    drop: function (event, ui) {
        console.log(this);
        var el = $($(ui.helper[0]).data("html"));
        $(this).append(el);
        setDrop($(".target", el));
    }
});
};
setDrop($('.target'));