ghaziguesmi
Messages postés5Date d'inscriptionlundi 24 novembre 2008StatutMembreDernière intervention28 mars 2013
-
27 mars 2013 à 17:02
ghaziguesmi
Messages postés5Date d'inscriptionlundi 24 novembre 2008StatutMembreDernière intervention28 mars 2013
-
28 mars 2013 à 09:04
BONJOUR
j'ai trouvé ce code pour file reader
Est-ce que je peux appliquée drag and drop pour mettre ds un autre DIV ?
problème ID ????
Merci
<!DOCTYPE html>
<html>
<head>
<title>File API - FileReader as Data URL</title>
<style>
body{
font-family: 'Segoe UI';
font-size: 12pt;
}
header h1{
font-size:12pt;
color: #fff;
background-color: #1BA1E2;
padding: 20px;
}
article
{
width: 80%;
margin:auto;
margin-top:10px;
}
.thumbnail{
height: 100px;
margin: 10px;
}
</style>
</head>
<header>
File API - FileReader
</header>
<script>
window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event){
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Only pics
if(!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load",function(event){
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "";
output.insertBefore(div,null);
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else
{
console.log("Your browser does not support File API");
}
}
</script>
<label for="files">Select multiple files: </label>
<output id="result" />
</html>
// Custom drop action for the country boxes
function dropItems(idOfDraggedItem,targetId,x,y)
{
var targetObj = document.getElementById(targetId); // Creating reference to target obj
var subDivs = targetObj.getElementsByTagName('DIV'); // Number of subdivs
if(subDivs.length>0 && targetId!='capitals')return; // Sub divs exists on target, i.e. element already dragged on it. => return from function without doing anything
var sourceObj = document.getElementById(idOfDraggedItem); // Creating reference to source, i.e. dragged object
var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1; // Find numeric id of target
var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1; // Find numeric id of source
if(numericIdTarget-numericIdSource==100){ // In the html above, there's a difference in 100 between the id of the country and it's capital(example:
// Oslo have id "box1" and Norway have id "box101", i.e. 1 + 100.
sourceObj.style.backgroundColor='#FFF'; // Set green background color for dragged object
}else{
sourceObj.style.backgroundColor=''; // Reset back to default white background color
}
if(targetId=='capitals'){ // Target is the capital box - append the dragged item as child of first sub div, i.e. as child of
var dragDropObj = new DHTMLgoodies_dragDrop(); // Creating drag and drop object
// Assigning drag events to the capitals
dragDropObj.addSource('box1',true); // Make
dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true); // Make
dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true); // Make
dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true); // Make
dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true); // Make
dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true); // Make
dragable. slide item back into original position after drop
dragDropObj.addSource('box7',true); // Make
dragable. slide item back into original position after drop
// Assigning drop events on the countries
dragDropObj.addTarget('box101','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box102','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box103','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box104','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box105','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box106','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box107','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box108','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box109','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box110','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box111','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box112','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('capitals','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.init(); // Initizlizing drag and drop object
deg) ">
" alt="" title="" />
@ KB
window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");