拖放圖像，通過ajax形式存儲圖像ID

Question

我試圖做一個拖放功能，圖像應該可拖動到一個部分並存儲到「文件夾」中。每個文件夾都有它自己的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> 

Answer 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傳遞到您的數據庫，以將其存儲在「文件夾」中或您需要執行的任何其他操作。