$(document).ready(function () {
var $o, os;
//generate toolbar
var $toolbar = $(".toolbar");
$.each(tools, function (i, tool) {
$("<img>", tool).appendTo($toolbar);
});
var $tools = $toolbar.find("img");
//define drag and drop handlers
$toolbar.on("dragstart", "img", onDrag);
$(".canvas").on({
dragenter: false,
dragover: false,
drop: onDrop
});
//handle commencement of drag
function onDrag(e) {
$o = $(this).clone();
var o = e.originalEvent;
o.effectAllowed = "copy";
os = { X: o.offsetX, Y: o.offsetY };
}
//handle drop
function onDrop(e) {
e.preventDefault();
var o = e.originalEvent;
var pos = { left: o.offsetX - os.X, top: o.offsetY - os.Y };
$o.css(pos);
$(this).append($o);
//***DATABASE example:-
// (1) Create dataset, e.g. JSON:-
var data = {
id: $o.data("id"),
description: $o.data("description"),
position: pos
};
// (2) Send (JSON) data to SQL webservice using AJAX POST:-
//$.post("sqlwebservice.ashx", data);
return false;
}
});
//define toolset (JSON, e.g. from database)...
var tools = [{
"data-id": 1,
alt: "sun",
title: "sun",
src: "http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Sunny.png",
"data-description": "sun in photo"
}, {
"data-id": 2,
alt: "snow",
title: "snow",
src: "http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Thermometer_Snowflake.png",
"data-description": "snow in photo"
}, {
"data-id": 3,
alt: "cloud",
title: "cloud",
src: "http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Overcast.png",
"data-description": "cloud in photo"
}, {
"data-id": 4,
alt: "rain",
title: "rain",
src: "http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Night_Rain.png",
"data-description": "rain in photo"
}];
该脚本在小提琴http://jsfiddle.net/alano/E8rrX/中运行良好。当我把它带到我的本地机器时，原始事件的 offsetx 和 offsety 属性出现为未定义。我不得不更改为 clientx 和 clienty 但是它们不能以正确的方式工作。有谁知道为什么当我在我的计算机上运行但不在小提琴中时 offsetx 和 offsety 会变得未定义？
提前致谢...