Question

我正在撰写电子邮件模板构建器。如何在div细胞中拖动图像？实际上我想将黄色和红色div拖到主容器中，然后将图像拖到div单元格中。

HTML是：

// Some fake testing data
  var chats = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'You on your way?',
    face: 'img/ben.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Hey, it\'s me',
    face: 'img/max.png'
  }, {
    id: 2,
    name: 'Adam Bradleyson',
    lastText: 'I should buy a boat',
    face: 'img/adam.jpg'
  }, {
    id: 3,
    name: 'Perry Governor',
    lastText: 'Look at my mukluks!',
    face: 'img/perry.png'
  }, {
    id: 4,
    name: 'Mike Harrington',
    lastText: 'This is wicked good ice cream.',
    face: 'img/mike.png'
  }];

，JavaScript代码为：

<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>

以下是jsfiddle

上的示例

Answer 1

将黄色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'));

需要BTW，jquery-UI.js，bootstrap.css和bootstrap.js

在div单元格内拖动图像

2 个答案: