私は raphael js を使用しており、「実行」ボタンをクリックするとパスに沿って移動する形状があります。ユーザーが実行をドラッグまたはクリックできるように、形状をドラッグ可能にするにはどうすればよいですか? ありがとう。これが私のコードです：
Raphael("holder", 500,500, function () {
var r = this,
p = r.path ('M 215.2 448 L 215.2 405.2 L 189.8 401.5 L 161.8 393.5 L 134.3 380.8 L 112.1 363.9 L 90.9 345.4 L 73.4 321.6 L 63.9 304.6 L 56 286.1 L 47 251.7 L 47 213.1 L 49.6 196.7 L 54.4 174.5 L 58.6 159.1 L 68.2 140.6 L 78.2 123.7 L 90.9 107.8 L 103.6 95.1 L 120.5 85 L 133.2 74.5 L 154.4 63.4 L 170.8 56.5 L 191.4 50.7 L 210 47.5 L 232.7 48 L 252.3 50.7 L 269.7 55.4 L 287.2 60.2 L 306.2 70.2 L 320.5 79.8 L 338.5 93 L 351.8 105.2 L 364.4 121 L 375.6 135.3 L 385.6 154.4 L 391.4 170.8 L 396.2 188.8 L 400.4 204.6 L 400.4 223.1 L 400.4 241.1 L 396.2 263.4 L 392.5 280.8 L 384.6 299.3 L 376.1 315.7 L 363.9 333.2 L 352.3 348 L 338 364.4 L 321.1 375.5 L 296.2 387.7 L 268.7 398.8 L 268.7 378.7 L 289.3 370.2 L 298.8 364.9 L 314.7 355.4 L 328.5 343.8 L 340.6 332.7 L 353.3 318.9 L 361.8 303.6 L 370.8 286.1 L 375 271.8 L 379.8 253.8 L 381.4 238 L 381.4 218.4 L 378.2 190.9 L 372.4 175 L 365.5 156.5 L 359.2 144.8 L 347.5 129.5 L 336.4 117.9 L 323.2 103.6 L 311 95.1 L 294.6 86.1 L 279.3 77.6 L 260.7 72.4 L 245.4 69.2 L 227.4 67.1 L 211 68.1 L 192 70.8 L 176.1 75 L 157.6 81.9 L 144.3 89.8 L 129.5 99.3 L 115.8 109.9 L 102.5 124.2 L 92.5 137.4 L 82.4 154.4 L 76.6 168.1 L 70.3 183.5 L 66.6 200.4 L 65.5 218.4 L 65 232.7 L 68.2 251.7 L 70.3 266.5 L 74 281.3 L 80.9 297.2 L 90.4 313.1 L 98.3 326.3 L 111 339.5 L 118.9 347 L 132.7 356.5 L 146.5 364.9 L 162.9 373.4 L 178.2 378.7 L 189.8 382.4 L 214.2 386.1 L 213.7 292.5 L 201.5 289.3 L 191.4 283.5 L 175.6 269.7 L 164.4 254.9 L 158.1 237.4 L 158.1 219.4 L 163.4 200.4 L 171.9 185 L 183.5 175 L 195.1 167.6 L 210 162.8 L 227.4 162.3 L 241.7 164.9 L 253.9 170.2 L 267.1 179.8 L 278.7 195.1 L 285.6 213.6 L 286.7 235.3 L 283 252.8 L 272.4 267.6 L 258.6 280.3 L 248.6 287.2 L 249.1 307.8 L 267.1 299.3 L 279.8 287.7 L 294.1 272.4 L 299.9 261.8 L 305.2 243.8 L 307.3 226.2 L 306.2 212 L 301 193.5 L 292 178.7 L 281.4 166.5 L 268.2 154.9 L 253.9 148 L 235.3 142.2 L 223.7 141.1 L 206.2 143.8 L 193 147.5 L 175.6 155.4 L 165 163.9 L 154.4 178.2 L 145.9 190.9 L 142.2 209.4 L 139.1 220 L 140.6 238.5 L 142.8 248 L 149.6 267.1 L 158.1 277.1 L 169.2 291.4 L 183 299.9 L 195.7 307.3 L 194.1 364.4 L 172.4 358.1 L 157 350.7 L 141.2 337.4 L 126.4 326.3 L 112.6 310.4 L 102.5 298.3 L 94.6 279.8 L 87.7 262.8 L 84 242.2 L 83 226.2 L 85.1 208.3 L 88.3 189.8 L 95.7 170.2 L 103.1 153.8 L 115.8 137.4 L 129.5 121.6 L 146.5 108.9 L 165 99.9 L 184.6 91.9 L 201.5 87.7 L 222.6 86.6 L 241.7 87.7 L 261.8 91.4 L 278.7 97.2 L 298.8 108.9 L 313.7 119.4 L 330.1 136.9 L 341.7 152.2 L 350.7 171.3 L 357.6 187.2 L 362.3 204.1 L 362.9 221.6 L 361.3 242.2 L 357.6 261.8 L 350.2 282.9 L 343.8 297.7 L 332.7 312.6 L 312.6 330 L 299.9 343.3 L 285.6 351.2 L 262.9 361.8 L 250.7 363.9 L 249.6 421.6 L 268.7 419.4 L 287.2 413.6 L 306.2 405.2 L 326.4 393.5 L 341.7 382.9 L 353.9 371.8 L 366 360.2 L 387.7 333.7 L 396.2 318.9 L 403.6 302 L 410 285.6 L 416.8 253.8 L 419.5 226.2 L 418.4 196.7 L 414.2 180.8 L 409.4 162.3 L 401 145.9 L 392.5 129.5 L 374 100.9 L 362.3 87.7 L 348 76.1 L 336.9 65.5 L 321.1 55.4 L 304.7 48 L 289.3 40.6 L 272.9 35.3 L 254.4 31.1 L 236.9 27.9 L 218.4 27.9 L 202.5 30.6 L 183 33.2 L 168.2 35.8 L 149.1 43.2 L 134.8 50.7 L 117.4 61.2 L 107.3 69.2 L 93 79.8 L 79.8 93 L 67.6 106.2 L 56.5 121.6 L 47 138 L 40.6 151.2 L 35.9 168.1 L 31.1 184.5 L 28.5 199.3 L 28.5 216.3 L 28.5 235.3 L 28.5 251.2 L 31.6 269.2 L 34.3 284 L 40.1 299.3 L 48 315.7 L 57 333.2 L 66 345.4 L 78.2 360.7 L 90.4 373.4 L 104.7 384 L 118.4 393.5 L 135.3 403 L 150.7 409.4 L 169.2 416.3 L 186.1 420.5 L 195.7 421.6 L 196.7 441.1 L 178.2 438.5 L 158.6 432.7 L 140.1 426.3 L 121.6 416.8 L 105.7 407.8 L 90.4 394.6 L 76.6 384 L 62.3 370.2 L 50.7 354.4 L 39.1 339.5 L 31.1 323.7 L 23.2 304.1 L 17.4 288.2 L 12.6 268.1 L 9.4 250.7 L 9.4 229 L 9.4 213.1 L 9.4 194 L 12.6 177.6 L 17.9 157.5 L 23.7 142.2 L 32.2 125.3 L 41.7 108.9 L 56.5 90.9 L 68.2 78.7 L 84 63.9 L 96.7 52.2 L 113.7 42.2 L 127.4 34.3 L 146.5 25.3 L 163.9 19.4 L 183 14.7 L 199.9 11.5 L 222.6 11.5 L 241.7 11.5 L 262.9 15.2 L 278.7 19.4 L 299.9 25.8 L 314.7 33.7 L 334.8 42.2 L 348 51.7 L 366 66.5 L 378.2 78.2 L 389.8 90.3 L 401.5 105.2 L 411.5 122.6 L 420.5 139.5 L 429.5 160.7 L 433.2 176.6 L 436.9 201.1 L 439.6 217.3 L 439.6 235.8 L 436.4 258.1 L 431.1 278.2 L 426.4 295.6 L 417.9 316.3 L 409.4 332.7 L 401 347 L 391.4 361.8 L 376.1 376.1 L 362.9 389.3 L 349.6 399.9 L 333.8 411.5 L 314.7 421 L 298.3 428.4 L 277.1 435.3 L 259.7 438.5 L 231.1 441.7 L 230.1 348 L 243.3 346.4 L 260.2 341.7 L 278.2 333.7 L 291.4 326.3 L 304.1 314.7 L 317.9 301.5 L 329 286.1 L 337.5 269.2 L 342.8 252.8 L 344.3 235.3 L 343.3 220 L 341.2 201.5 L 339.6 190.3 L 332.7 175 L 325.3 159.7 L 313.1 144.8 L 301 132.7 L 286.1 123.1 L 272.4 114.7 L 254.4 109.4 L 239.6 106.2 L 220 105.2 L 205.2 105.7 L 187.7 110.4 L 168.7 117.3 L 153.9 127.4 L 138.5 137.4 L 127.9 151.7 L 118.4 164.4 L 110.5 180.3 L 105.2 197.2 L 102.5 214.7 L 101 226.2 L 103.1 242.7 L 105.7 258.6 L 111.5 275.5 L 117.4 287.7 L 128.5 302.5 L 138.5 315.7 L 154.9 329 L 164.4 333.2 L 174.5 336.9 L 176.6 316.8 L 165.4 312.4 L 153.3 300.4 L 141.2 288.2 L 132.2 270.2 L 124.2 255.9 L 122.1 238 L 120.5 217.9 L 125.8 198.3 L 130.6 181.3 L 143.8 162.8 L 154.4 149.6 L 168.7 138 L 186.1 131.6 L 207.8 126.3 L 222.9 124.2 L 245.4 127.4 L 261.8 131.1 L 280.9 142.2 L 295.7 153.8 L 308.4 172.9 L 317.4 190.9 L 324.2 214.1 L 324.8 232.1 L 321.6 253.3 L 316.3 271.3 L 302.5 289.8 L 288.8 302.5 L 274 315.7 L 256 322.6 L 231.6 329.5 L 225.8 222.6 L 215.2').attr({stroke: "#fff", opacity: .0, "stroke-width": 10}),
len = p.getTotalLength(),
e = r.ellipse(0, 0, 6, 6).attr({stroke: "none", fill: "#fef506"}).onAnimation(function () {
var t = this.attr("transform");
over.attr({path: "M238,376L" + t[0][1] + "," + t[0][2] + "z"});
});
r.circle(516, 248, 5).attr({stroke: "none", fill: "#", opacity: 0}).click(function () {
e.attr({rx: 5, ry: 3}).animateAlong(p, 4000, true, function () {
e.attr({rx: 4, ry: 4});
});
});
r.customAttributes.along = function (v) {
var point = p.getPointAtLength(v * len);
return {
transform: "t" + [point.x, point.y] + "r" + point.alpha
};
};
e.attr({along: 0});
var rotateAlongThePath = true;
run=document.getElementById('run'),
run.onclick= function() {
e.animate({along:3},2000000, function () {
e.attr({along: 0});
e.animate(anim.delay(500));
setTimeout(run);
});
}
run();
});