在 div 单元格内拖动图像

Question

我正在编写一个电子邮件模板生成器。如何在 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>

JavaScript 代码是：

$(function () {
toolBox = $('#toolBox'),
container = $('.container'),


container.sortable({
    revert: false,
    beforeStop: function (event, ui) {
        $(this).data("lastItem", ui.item);
        debugger;
    },
    receive: function (event, ui) {
        $(this).data("lastItem").find('img').css('opacity', '1');
        debugger;
        //ui.item.draggable('destroy').css('opacity', '0.2');
    }
});



toolBox.find('.customeDraggable').draggable({
    connectToSortable: container,
    helper: "clone",
    revert: "invalid",
    stop: handleDragStop
});
function handleDragStop(event, ui) {
    debugger;
    var offsetXPos = parseInt(ui.offset.left);
    var offsetYPos = parseInt(ui.offset.top);
    //alert("Drag stopped!\n\nOffset: (" + offsetXPos + ", " + offsetYPos + ")\n");
}


});

这是jsfiddle上的示例

Answer 1

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

另一方面，如果图像不能拖到红色的div中，它必须能够被拖到黄色的div中，为此需要一个新的类。

Answer 2

我终于找到了一个示例，现在只需自定义它。 jsfiddle sample

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>

CSS：

.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;
}

和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