javascript - Drag and drop image, store image ID via ajax form -
i trying make drag , drop function, image should draggable onto section , stored "folder". each folder have it's own id. model working need front-end wizardry make good, similar how gmail works drag email folder.
this have far, managed working dragging image onto textbox, hiding textbox doesn't have same effect, though.
html image:
<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>
taking jquery ui droppable demo, made following can start with: 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 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 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 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 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 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 { 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 gallery , trash var $gallery = $("#gallery"), $trash = $("#trash"), $folder_1 = $("#folder-1"), $folder_2 = $("#folder-2"); // let gallery items draggable $("li", $gallery).draggable({ cancel: "a.ui-icon", // clicking icon won't initiate dragging revert: "invalid", // when not dropped, item revert initial position containment: "document", helper: "clone", cursor: "move" }); // let trash droppable, accepting 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 gallery droppable well, accepting items 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 image' class='ui-icon ui-icon-refresh'>recycle image</a>"; function moveimage($item, t) { console.log("image moving " + 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 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 ui.dialog used 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 icons behavior 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; }); }); this example allows user drag image folder, using moveimage($item, t) $item draggable item , t target id. can update function pass image url via ajax database store in "folder" or whatever else need do.
Comments
Post a Comment