تصف هذه المقالة طريقة JavaScript لتنفيذ تأثيرات السحب والإفلات النصية. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <html>
<head>
<title> يدرك JavaScript تأثير السحب والإسقاط للنص والصور </title>
<type type = "text/css">
*{padding: 0 ؛ الهامش: 0 ؛}
.tips {الموضع: Absolute ؛ الخلفية: #EEE ؛}
</style>
</head>
<body>
<div id = "tips1" onMouseover = "dragf.drag ('tips1') ؛">
<img src = "/images/skinslogo.gif"> <br> يمكن سحب الصورة </div>
<div id = "tips2" onMouseover = "Dragf.drag ('Tips2') ؛"> <a href = "// www.vevb.com" target = "_ blank"
</div>
</body>
<script type = "text/javaScript">
var $ id = function (id) {return document.getElementById (id) ؛}
var dragf = {
مغلق: خطأ ،
LastObj: غير محدد ،
السحب: وظيفة (obj) {
$ id (obj) .onmousedown = function (e) {
var e = e؟ E: Window.Event ؛
إذا (! window.event) {
dragf.locked = true ؛
$ id (obj) .style.position = "absolute" ؛
$ id (obj) .style.zindex = "100" ؛
if (dragf.lastobj && dragf.lastobj! = $ id (obj)) {/* يتطلب السحب متعدد العناصر استعادة حالة العناصر الأخيرة*/
dragf.lastobj.style.zindex = "1" ؛
}
dragf.lastobj = $ id (obj) ؛
var tempx = $ id (obj) .OffSetLeft ؛
var tempy = $ id (obj) .OffSetTop ؛
dragf.x = e.clientx ؛
dragf.y = e.clienty ؛
document.onmousemove = function (e) {
var e = e؟ E: Window.Event ؛
if (dragf.locked == false) return false ؛
$ id (obj) .style.left = tempx+e.clientx-dragf.x+"px" ؛
$ id (obj) .style.top = tempy+e.clienty-dragf.y+"px" ؛
if (window.event) {
}
document.onmouseup = function () {
dragf.locked = false ؛
}
}
}
}
</script>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.