| [备忘]Javascript的图片拖拽排序--- Free Floating Gallery With Drag'n Drop Script | ||
上一篇:[备忘]CKeditor在HTA中不能用~~~解决办法 |
||
| 添加日期：2012/6/9 12:07:56 | 快速返回 返回列表 | 阅读3623次 |
http://www.dhtmlgoodies.com/index.html?whichScript=floating_gallery 一个能看到的demo地址 http://www.beijibear.com/myplugins/floating_gallery/floating_gallery.html 主要就两个文件，我把内容直接贴上吧。 floating_gallery.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Floating image gallery with drag & drop</title> <style type="text/css"> body{ /* You can remove these four options */ background-image:url('http://www.dhtmlgoodies.com/images/heading3.gif'); background-repeat:no-repeat; padding-top:85px; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; height:100%; width:100%; margin:10px; padding-left:0px; } form{ display:inline; } .imageBox,.imageBoxHighlighted{ width:130px; /* Total width of each image box */ height:160px; /* Total height of each image box */ float:left; } .imageBox_theImage{ width:110px; /* Width of image */ height:125px; /* Height of image */ /* Don't change these values * */ background-position: center center; background-repeat: no-repeat; margin: 0 auto; margin-bottom:2px; } .imageBox .imageBox_theImage{ border:1px solid #DDD; /* Border color for not selected images */ padding:2px; } .imageBoxHighlighted .imageBox_theImage{ border:3px solid #316AC5; /* Border color for selected image */ padding:0px; } .imageBoxHighlighted span{ /* Title of selected image */ background-color: #316AC5; color:#FFFFFF; padding:2px; } .imageBox_label{ /* Title of images - both selected and not selected */ text-align:center; font-family: arial; font-size:11px; padding-top:2px; margin: 0 auto; } /* DIV that indicates where the dragged image will be placed */ #insertionMarker{ height:150px; width:6px; position:absolute; display:none; } #insertionMarkerLine{ width:6px; /* No need to change this value */ height:145px; /* To adjust the height of the div that indicates where the dragged image will be dropped */ } #insertionMarker img{ float:left; } /* DIV that shows the image as you drag it */ #dragDropContent{ opacity:0.4; /* 40 % opacity */ filter:alpha(opacity=40); /* 40 % opacity */ /* No need to change these three values */ position:absolute; z-index:10; display:none; } </style> <script type="text/javascript" src="js/floating-gallery.js" ></script> </head> <body> With this script, you can reorganise the order of images by dragging and dropping them(as in a standard file manager). When you're finished, you can save the changes by a standard form submission or perhaps more elegant: by use of Ajax(Asyncron Javascript and XML). <form action="somePage.html" method="post"> <div style="clear:both;padding-bottom:10px"> <input type="button" style="width:100px" value="Save" onclick="saveImageOrder()"> </div> </form> <div id="GalleryContainer"> <div class="imageBox" id="imageBox0"> <div class="imageBox_theImage" style="background-image:url('example_images/image1.jpg')"></div> <div class="imageBox_label"><span>Image number 1</span></div> </div> <div class="imageBox" id="imageBox1"> <div class="imageBox_theImage" style="background-image:url('example_images/image2.jpg')"></div> <div class="imageBox_label"><span>Image number 2</span></div> </div> <div class="imageBox" id="imageBox2"> <div class="imageBox_theImage" style="background-image:url('example_images/image3.jpg')"></div> <div class="imageBox_label"><span>Image number 3</span></div> </div> <div class="imageBox" id="imageBox3"> <div class="imageBox_theImage" style="background-image:url('example_images/image4.jpg')"></div> <div class="imageBox_label"><span>Image number 4</span></div> </div> <div class="imageBox" id="imageBox4"> <div class="imageBox_theImage" style="background-image:url('example_images/image5.jpg')"></div> <div class="imageBox_label"><span>Image number 5</span></div> </div> <div class="imageBox" id="imageBox5"> <div class="imageBox_theImage" style="background-image:url('example_images/image6.jpg')"></div> <div class="imageBox_label"><span>Image number 6</span></div> </div> <div class="imageBox" id="imageBox6"> <div class="imageBox_theImage" style="background-image:url('example_images/image7.jpg')"></div> <div class="imageBox_label"><span>Image number 7</span></div> </div> <div class="imageBox" id="imageBox7"> <div class="imageBox_theImage" style="background-image:url('example_images/image8.jpg')"></div> <div class="imageBox_label"><span>Image number 8</span></div> </div> <div class="imageBox" id="imageBox8"> <div class="imageBox_theImage" style="background-image:url('example_images/image9.jpg')"></div> <div class="imageBox_label"><span>Image number 9</span></div> </div> <div class="imageBox" id="imageBox9"> <div class="imageBox_theImage" style="background-image:url('example_images/image10.jpg')"></div> <div class="imageBox_label"><span>Image number 10</span></div> </div> <div class="imageBox" id="imageBox10"> <div class="imageBox_theImage" style="background-image:url('example_images/image11.jpg')"></div> <div class="imageBox_label"><span>Image number 11</span></div> </div> <div class="imageBox" id="imageBox11"> <div class="imageBox_theImage" style="background-image:url('example_images/image12.jpg')"></div> <div class="imageBox_label"><span>Image number 12</span></div> </div> <div class="imageBox" id="imageBox12"> <div class="imageBox_theImage" style="background-image:url('example_images/image13.jpg')"></div> <div class="imageBox_label"><span>Image number 13</span></div> </div> <div class="imageBox" id="imageBox13"> <div class="imageBox_theImage" style="background-image:url('example_images/image14.jpg')"></div> <div class="imageBox_label"><span>Image number 14</span></div> </div> <div class="imageBox" id="imageBox14"> <div class="imageBox_theImage" style="background-image:url('example_images/image15.jpg')"></div> <div class="imageBox_label"><span>Image number 15</span></div> </div> </div> <div id="insertionMarker"> <img src="images/marker_top.gif"> <img src="images/marker_middle.gif" id="insertionMarkerLine"> <img src="images/marker_bottom.gif"> </div> <div id="dragDropContent"> </div> <div id="debug" style="clear:both"> </div> </body> </html> js/floating-gallery.js /************************************************************************************************************ (C) www.dhtmlgoodies.com, September 2005 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. Terms of use: LGPL: See web page for more info. Thank you! www.dhtmlgoodies.com Alf Magne Kalleland ************************************************************************************************************/ var operaBrowser = false; if(navigator.userAgent.indexOf('Opera')>=0)operaBrowser=1; var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false; var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1; function cancelEvent() { return false; } var activeImage = false; var readyToMove = false; var moveTimer = -1; var dragDropDiv; var insertionMarker; var offsetX_marker = -3; // offset X - element that indicates destinaton of drop var offsetY_marker = 0; // offset Y - element that indicates destinaton of drop var firefoxOffsetX_marker = -3; var firefoxOffsetY_marker = -2; if(navigatorVersion<6 && MSIE){ /* IE 5.5 fix */ offsetX_marker-=23; offsetY_marker-=10; } var destinationObject = false; var divXPositions = new Array(); var divYPositions = new Array(); var divWidth = new Array(); var divHeight = new Array(); var tmpLeft = 0; var tmpTop = 0; var eventDiff_x = 0; var eventDiff_y = 0; function getTopPos(inputObj) { var returnValue = inputObj.offsetTop; while((inputObj = inputObj.offsetParent) != null){ if(inputObj.tagName!='HTML'){ returnValue += (inputObj.offsetTop - inputObj.scrollTop); if(document.all)returnValue+=inputObj.clientTop; } } return returnValue; } function getLeftPos(inputObj) { var returnValue = inputObj.offsetLeft; while((inputObj = inputObj.offsetParent) != null){ if(inputObj.tagName!='HTML'){ returnValue += inputObj.offsetLeft; if(document.all)returnValue+=inputObj.clientLeft; } } return returnValue; } function selectImage(e) { if(document.all && !operaBrowser)e = event; var obj = this.parentNode; if(activeImage)activeImage.className='imageBox'; obj.className = 'imageBoxHighlighted'; activeImage = obj; readyToMove = true; moveTimer=0; tmpLeft = e.clientX + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft); tmpTop = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop); startMoveTimer(); return false; } function startMoveTimer(){ if(moveTimer>=0 && moveTimer<10){ moveTimer++; setTimeout('startMoveTimer()',15); } if(moveTimer==10){ getDivCoordinates(); var subElements = dragDropDiv.getElementsByTagName('DIV'); if(subElements.length>0){ dragDropDiv.removeChild(subElements[0]); } dragDropDiv.style.display='block'; var newDiv = activeImage.cloneNode(true); newDiv.className='imageBox'; newDiv.id=''; dragDropDiv.appendChild(newDiv); dragDropDiv.style.top = tmpTop + 'px'; dragDropDiv.style.left = tmpLeft + 'px'; } return false; } function dragDropEnd(ev) { readyToMove = false; moveTimer = -1; dragDropDiv.style.display='none'; insertionMarker.style.display='none'; if(destinationObject && destinationObject!=activeImage){ var parentObj = destinationObject.parentNode; parentObj.insertBefore(activeImage,destinationObject); activeImage.className='imageBox'; activeImage = false; destinationObject=false; getDivCoordinates(); } return false; } function dragDropMove(e) { if(moveTimer==-1)return; if(document.all && !operaBrowser)e = event; var leftPos = e.clientX + document.documentElement.scrollLeft - eventDiff_x; var topPos = e.clientY + document.documentElement.scrollTop - eventDiff_y; dragDropDiv.style.top = topPos + 'px'; dragDropDiv.style.left = leftPos + 'px'; leftPos = leftPos + eventDiff_x; topPos = topPos + eventDiff_y; if(e.button!=1 && document.all && !operaBrowser)dragDropEnd(e); var elementFound = false; for(var prop in divXPositions){ if(divXPositions[prop]/1 < leftPos/1 && (divXPositions[prop]/1 + divWidth[prop]*0.7)>leftPos/1 && divYPositions[prop]/1<topPos/1 && (divYPositions[prop]/1 + divWidth[prop])>topPos/1){ if(document.all ){ offsetX = offsetX_marker; offsetY = offsetY_marker; }else{ offsetX = firefoxOffsetX_marker; offsetY = firefoxOffsetY_marker; } insertionMarker.style.top = divYPositions[prop] + offsetY + 'px'; insertionMarker.style.left = divXPositions[prop] + offsetX + 'px'; insertionMarker.style.display='block'; destinationObject = document.getElementById(prop); elementFound = true; break; } } if(!elementFound){ insertionMarker.style.display='none'; destinationObject = false; } return false; } function getDivCoordinates() { var divs = document.getElementsByTagName('DIV'); for(var no=0;no<divs.length;no++){ if(divs[no].className=='imageBox' || divs[no].className=='imageBoxHighlighted' && divs[no].id){ divXPositions[divs[no].id] = getLeftPos(divs[no]); divYPositions[divs[no].id] = getTopPos(divs[no]); divWidth[divs[no].id] = divs[no].offsetWidth; divHeight[divs[no].id] = divs[no].offsetHeight; } } } function saveImageOrder() { var orderString = ""; var objects = document.getElementsByTagName('div'); for(var no=0;no<objects.length;no++){ if(objects[no].className=='imageBox' || objects[no].className=='imageBoxHighlighted'){ if(objects[no].id != "foo" && objects[no].parentNode.id != "dragDropContent"){ // Check if it's not the fake image, or the drag&drop box if(orderString.length>0){ orderString = orderString + ','; } orderString = orderString + objects[no].id; } } } document.getElementById('debug').innerHTML = 'This is the new order of the images(IDs) : <br>' + orderString; } function initGallery() { var divs = document.getElementsByTagName('div'); for(var no=0;no<divs.length;no++){ if(divs[no].className=='imageBox_theImage' || divs[no].className=='imageBox_label'){ divs[no].onmousedown = selectImage; } } var insObj = document.getElementById('insertionMarker'); var images = insObj.getElementsByTagName('IMG'); document.body.onselectstart = cancelEvent; document.body.ondragstart = cancelEvent; document.body.onmouseup = dragDropEnd; document.body.onmousemove = dragDropMove; window.onresize = getDivCoordinates; dragDropDiv = document.getElementById('dragDropContent'); insertionMarker = document.getElementById('insertionMarker'); getDivCoordinates(); var list = document.getElementsByClassName('imageBox'); var container = list[0].parentNode; var lastImage = list[list.length-1]; var fooDiv = document.createElement('div'); fooDiv.className = "imageBox"; fooDiv.id = "foo"; fooDiv.style.cssText = "visibility:hidden"; if(lastImage.nextSibling){ container.insertBefore(fooDiv,lastImage.nextSibling); } else { container.appendChild(fooDiv); } } window.onload = initGallery; 倒数几行的， var list = document.getElementsByClassName('imageBox'); 可能有问题，IE貌似不支持getElementsByClassName方法，所以可以替代一下。 追加 function getElementsByClassName(node, classname) { var a = []; var re = new RegExp('(^| )'+classname+'( |$)'); var els = node.getElementsByTagName("*"); for(var i=0,j=els.length; i<j; i++) if(re.test(els[i].className))a.push(els[i]); return a; } 然后把那句换成 var list = getElementsByClassName(document.body,'imageBox'); 就OK了。 还有源地址的说明，一起吧： ---------------------------------------------------------------- Download entire script as zip file Click here to download this entire script including images as a zip file. Open the file floating_gallery in your browser to see how it works. Add images to the gallery The images used in the gallery are inserted by using just plain HTML. The syntax you have to use is like this: <div class="imageBox" id="imageBox1"> <div class="imageBox_theImage" style="background-image:url('example_images/image1.jpg')"></div> <div class="imageBox_label"><span>Image number 1</span></div> </div> The values that will change for each image are The ID of the first div("imageBox1"), which should be unique for each of the images in the gallery. The background image of the second div. This will be the path to the image you want to show The text between the <span> tags of the third div("Image number 1"). This will be the title of your image How to save changes After someone have rearranged the images, you might want to give them the option to save their changes. This can be done by working a little bit with a function called saveImageOrder(). What this function does is to create a comma separated list of images IDs based on how the images are currently ordered. Example : "1,3,4,9,6". One suggestion on how the to save these changes is to have a hidden frame and post form data there. I.e.: Create a hidden frame(example: <IFRAME src="whereToSubmit.html" name="myIframe" frameborder="no" height="1" width="1">) Create a form where target is set to this iframe(<FORM name="myForm" action="whereToSubmit.html" target="myIframe" method="post">) Create a hidden form field where we store the commaseparated list of image-ids: (<INPUT type="hidden" name="imageIdList">) In the saveImageOrder function, update the hidden form field with the commaseparated list of image ids: document.myForm.imageIdList.value = orderString) At last, submit the form: document.myForm.submit() Now, the order of the images is submitted to the "whereToSubmit.html" file. There, you will typically explode the string into an array of pieces and then update your database In case you don't want drag & drop If you only want to display the images and don't want any drag & drop support, you can simply remove the entire <SCRIPT>...</SCRIPT> part. Changelog April, 29th, 2009: Bugfix (problem with the save string) added support for dragging images to the end of the slideshow. Thanks to Jonathan Massuchetti for the help with this. |
||
| 评论 COMMENTS | |
| 没有评论 No Comments. |
