我正在尝试制作拖放功能，图像应该可拖动到某个部分并存储到“文件夹”中。每个文件夹都有自己的ID。该模型正在运行，但现在我需要一些前端魔法来使其看起来很好，类似于Gmail将电子邮件拖动到文件夹中的工作方式。
这就是我到目前为止，我设法将图像拖动到文本框上，但隐藏文本框却没有相同的效果。
HTML图片：
<img id="{{$preview->id}}" draggable="true" src="{{$preview->img_thumb}}" data-zoom-image="{{$preview->img_url}}" data-imgid="{{$preview->id}}" data-imgexp="exposure" class="img-rounded draggie" height="80" width="120"></img>
JS：
<script>
$(document).ready(function() {
$(".draggie").draggable({
containment: "parent",
cursor: "move",
revert: true,
revertDuration: 100
});
var targetName;
$(".draggie").mousedown(function(){
exposure = $(this).attr("data-imgexp");
id = $(this).attr("data-imgid");
});
$("#image-id").droppable({
accept: ".draggie",
drop: function(event) {
$('#image-exp').val($('#image-exp').val() + exposure);
$('#image-id').val($('#image-id').val() + id);
}
});
});
</script>
答案 0 :(得分：1)
采取JQuery UI Droppable Demo，我做了以下内容，您可以从以下开始：https://jsfiddle.net/Twisty/9j93xnu2/3/
<强> HTML
<div class="ui-widget ui-helper-clearfix">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Peaks</h5>
<img src="http://thumb1.shutterstock.com/display_pic_with_logo/278821/252659818/stock-photo-beautiful-view-of-mount-ama-dablam-way-to-everest-base-camp-nepal-252659818.jpg" alt="" width="96" height="72">
<a href="" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Rock</h5>
<img src="http://thumb9.shutterstock.com/display_pic_with_logo/1516148/324716942/stock-photo-landscape-of-zhangjiajie-taken-from-old-house-field-located-in-wulingyuan-scenic-and-historic-324716942.jpg" alt="" width="96" height="72">
<a href="http://thumb9.shutterstock.com/display_pic_with_logo/1516148/324716942/stock-photo-landscape-of-zhangjiajie-taken-from-old-house-field-located-in-wulingyuan-scenic-and-historic-324716942.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 3</h5>
<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72">
<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 4</h5>
<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72">
<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
</ul>
<div id="folder-1" class="folder ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-folder-open">Folder</span> Folder 1</h4>
</div>
<div id="folder-2" class="folder ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-folder-open">Folder</span> Folder 2</h4>
</div>
<div id="trash" class="folder ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>
</div>
<强> CSS
#gallery {
float: left;
width: 65%;
min-height: 12em;
}
.gallery.custom-state-active {
background: #eee;
}
.gallery li {
float: left;
width: 96px;
padding: 0.4em;
margin: 0 0.4em 0.4em 0;
text-align: center;
}
.gallery li h5 {
margin: 0 0 0.4em;
cursor: move;
}
.gallery li a {
float: right;
}
.gallery li a.ui-icon-zoomin {
float: left;
}
.gallery li img {
width: 100%;
cursor: move;
}
.folder {
float: right;
width: 30%;
min-height: 6em;
padding: 1%;
margin: 3px 0;
}
.folder h4 {
line-height: 16px;
margin: 0 0 0.4em;
}
.folder h4 .ui-icon {
float: left;
}
.folder .gallery h5 {
display: none;
}
<强> JQuery的
$(function() {
// there's the gallery and the trash
var $gallery = $("#gallery"),
$trash = $("#trash"),
$folder_1 = $("#folder-1"),
$folder_2 = $("#folder-2");
// let the gallery items be draggable
$("li", $gallery).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
deleteImage(ui.draggable);
}
});
$folder_1.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
moveImage(ui.draggable, event.target.id);
}
});
$folder_2.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
moveImage(ui.draggable, event.target.id);
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: "#trash li",
activeClass: "custom-state-active",
drop: function(event, ui) {
recycleImage(ui.draggable);
}
});
// image deletion function
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
function moveImage($item, t) {
console.log("Image moving to " + t);
var $target = $("#" + t);
$item.fadeOut(function() {
var $list = $("ul", $target).length ? $("ul", $target) : $("<ul class='gallery ui-helper-reset'/>").appendTo($target);
$item.find("a.ui-icon-trash").remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function() {
$item.animate({
width: "48px"
})
.find("img")
.animate({
height: "36px"
});
});
});
}
function deleteImage($item) {
$item.fadeOut(function() {
var $list = $("ul", $trash).length ?
$("ul", $trash) :
$("<ul class='gallery ui-helper-reset'/>").appendTo($trash);
$item.find("a.ui-icon-trash").remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function() {
$item
.animate({
width: "48px"
})
.find("img")
.animate({
height: "36px"
});
});
});
}
// image recycle function
var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
function recycleImage($item) {
$item.fadeOut(function() {
$item
.find("a.ui-icon-refresh")
.remove()
.end()
.css("width", "96px")
.append(trash_icon)
.find("img")
.css("height", "72px")
.end()
.appendTo($gallery)
.fadeIn();
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage($link) {
var src = $link.attr("href"),
title = $link.siblings("img").attr("alt"),
$modal = $("img[src$='" + src + "']");
if ($modal.length) {
$modal.dialog("open");
} else {
var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
.attr("src", src).appendTo("body");
setTimeout(function() {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1);
}
}
// resolve the icons behavior with event delegation
$("ul.gallery > li").click(function(event) {
var $item = $(this),
$target = $(event.target);
if ($target.is("a.ui-icon-trash")) {
deleteImage($item);
} else if ($target.is("a.ui-icon-zoomin")) {
viewLargerImage($target);
} else if ($target.is("a.ui-icon-refresh")) {
recycleImage($item);
}
return false;
});
});
此示例允许用户使用moveImage($item, t)将图像拖动到文件夹，其中$item是可拖动项，t是目标ID。您可以更新此功能以通过AJAX将图像URL传递到数据库，以将其存储在“文件夹”或您需要执行的任何其他操作中。