Forum de discussion
Forum « Programmation Javascript » (archives)
drag and drop
Envoyé: 1er mai 2004, 6h35 par Jackie
voila je suis totalement ignorant en jaavscript et pourtant j'ai besoin de savoir comment rajouter une deuxieme image ou layer dans ce script afin qu'il puisse egalement etre possiblde faire des drags and drop avec mais que ca derniere position soit enregistrer de la meme maniere que l'autre
merci d'avance pour votre aide
voila le code:
<html>
<head>
<title>Record Drag/Drop Position</title>
<script type="text/javascript">
// Write session or persistent cookies
function setCookie(cookieName,cookieValue,cookieExpiration) {
if (cookieExpiration!=null) {
// Cookie has a duration / date object is expected
document.cookie=cookieName + "=" + escape(cookieValue) + ";path=/;expires=" + cookieExpiration.toGMTString()
} else {
// Cookie has no duration / it will remain only for the browser session
document.cookie=cookieName + "=" + escape(cookieValue) + ";path=/"
}
}
// Get cookie value
function getCookie(cookieName) {
cookieString=document.cookie
cookieName+="="
// If at least one cookie exists...
if (cookieString.length>0) {
// Search for the cookie name
i=cookieString.indexOf(cookieName)
// If the cookie name exists, return its value
if (i!=-1) {
i += cookieName.length
j = cookieString.indexOf(";",i)
if (j==-1) {j = cookieString.length}
return unescape(cookieString.substring(i,j))
}
}
// Return a null value if the cookie doesn't exist
return null
}
// Delete a cookie
function deleteCookie(cookieName) {
// Get a date object for the 1st january 1970
cookieExpiration = new Date(1970,0,1)
// Set cookie value to an empty string and its expiration date to the 1st january 1970
document.cookie=cookieName + "=;path=/;expires=" + cookieExpiration.toGMTString()
}
// Get object left position, even if nested
function getAbsLeft(o) {
oLeft = o.offsetLeft
while(o.offsetParent!=null) {
oParent = o.offsetParent
oLeft += oParent.offsetLeft
o = oParent
}
return oLeft
}
// Get object top position, even if nested
function getAbsTop(o) {
oTop = o.offsetTop
while(o.offsetParent!=null) {
oParent = o.offsetParent
oTop += oParent.offsetTop
o = oParent
}
return oTop
}
// Set object left position
function setLeft(o,oLeft) {
o.style.left = oLeft + "px"
}
// Set object top position
function setTop(o,oTop) {
o.style.top = oTop + "px"
}
// Set object top and left positions
function setPosition(o,oLeft,oTop) {
setLeft(o,oLeft)
setTop(o,oTop)
}
// Mouse button down handler
function dragMouseDown(e)
{
// Get the event object for IE
if (!e) {e = window.event}
// Dragging begins...
doDrag=true
// Get a reference to the dragged object
o=document.getElementById("draggedObject")
// Get original top and left positions of the dragged object
oLeft=getAbsLeft(o)
oTop=getAbsTop(o)
// Get the mouse cursor position into the dragged object surface
mouseLeft=e.clientX-oLeft
mouseTop=e.clientY-oTop
}
// Mouse button up handler
function dragMouseUp(e)
{
// Dragging stops
doDrag=false
// Get the event object for IE
if (!e) {e = window.event}
// Store the position of the dragged object
// as a cookie / the cookie value is a snippet of JavaScript
oLeft = e.clientX-mouseLeft
oTop = e.clientY-mouseTop
cookieValue = "var oLeft=" + oLeft + ";" + "var oTop=" + oTop
setCookie("recPos",cookieValue,expirationDate)
}
// Mouse move handler
function dragMouseMove(e)
{
// Get the event object for IE
if (!e) {e = window.event}
// If dragging is on going...
if (doDrag)
{
// Get a reference to the dragged object
o=document.getElementById("draggedObject")
// Set the top and left positions of the dragged object relatively to the mouse cursor
oLeft = e.clientX-mouseLeft
oTop = e.clientY-mouseTop
setPosition(o,oLeft,oTop)
// Stop event propagation
return false
}
}
// Show last recorded position
function getRecPos()
{
alert(getCookie("recPos"))
}
// At page load, look for a recorded position
// If so, move the dragged object to the last recorded position
function setRecPos()
{
cookieValue = getCookie("recPos")
if (cookieValue!=null)
{
// Interpret the snippet of JavaScript stored in the cookie
eval(cookieValue)
// Move the dragged object to the last recorded position
o=document.getElementById("draggedObject")
setPosition(o,oLeft,oTop)
}
}
// Set the expiration date 5 days ahead in the time
expirationDate = new Date()
expirationDate.setDate(expirationDate.getDate() + 5)
doDrag=false
mouseLeft=0
mouseTop=0
document.onmousemove = dragMouseMove
</script>
</head>
<body onload="setRecPos()">
<div id="draggedObject" style="position:absolute;top:100px;left:100px;width:80px;height:80px;cursor:pointer;cursor:hand;background-color:green" onmousedown="dragMouseDown(event)" onmouseup="dragMouseUp(event)"></div>
<button onclick="getRecPos()">Get recorded position</button></br>
Drag object, close the demo page and re-open it to see the end result.
</body>
</html>
Réponses
| |||||||||||||||||||||||||||||||||||
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](http://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](http://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](http://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!
AbuseIPDB
Connexion