質問編集履歴
2
教えていただいた内容を反映
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -80,17 +80,25 @@
|
|
|
80
80
|
|
|
81
81
|
let src = 'test2.png';
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
|
|
84
84
|
|
|
85
|
+
var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
|
|
86
|
+
|
|
87
|
+
image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', src);
|
|
88
|
+
|
|
89
|
+
image.setAttributeNS(null, 'id', 'test');
|
|
90
|
+
|
|
85
|
-
|
|
91
|
+
image.setAttributeNS(null, 'width', 64);
|
|
92
|
+
|
|
93
|
+
image.setAttributeNS(null, 'height', 64);
|
|
94
|
+
|
|
95
|
+
svg_doc.appendChild(image);
|
|
86
96
|
|
|
87
97
|
|
|
88
98
|
|
|
89
|
-
$(
|
|
99
|
+
$(image).ready(function() {
|
|
90
100
|
|
|
91
|
-
let test1 = $(svg_doc).find('#test');
|
|
92
|
-
|
|
93
|
-
$(
|
|
101
|
+
$(image).draggable();
|
|
94
102
|
|
|
95
103
|
});
|
|
96
104
|
|
1
文章が途中で切れてしまっていたので修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
その画像をドラッグ&ドロップで動かせる様にしたいと考えています。
|
|
4
4
|
|
|
5
5
|
|
|
6
|
+
|
|
7
|
+
現在のソースとしては以下の通りです。
|
|
6
8
|
|
|
7
9
|
- html
|
|
8
10
|
|
|
@@ -46,7 +48,7 @@
|
|
|
46
48
|
|
|
47
49
|
<object id="test" type="image/svg+xml" data="test.svg"></object>
|
|
48
50
|
|
|
49
|
-
<button name="addBtn">追加<
|
|
51
|
+
<button name="addBtn">追加</button>
|
|
50
52
|
|
|
51
53
|
</body>
|
|
52
54
|
|
|
@@ -64,4 +66,62 @@
|
|
|
64
66
|
|
|
65
67
|
```
|
|
66
68
|
|
|
67
|
-
- js
|
|
69
|
+
- js
|
|
70
|
+
|
|
71
|
+
```javascript
|
|
72
|
+
|
|
73
|
+
$(function() {
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
$('[name="addBtn"]').on('click', function(){
|
|
78
|
+
|
|
79
|
+
let svg_doc = document.getElementById('test_obj').contentDocument;
|
|
80
|
+
|
|
81
|
+
let src = 'test2.png';
|
|
82
|
+
|
|
83
|
+
var obj = '<image xmlns="http://www.w3.org/2000/svg" id="test" data-name="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="'+src+'"/>';
|
|
84
|
+
|
|
85
|
+
$(svg_doc).find('#base').append(obj);
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
$(obj).ready(function() {
|
|
90
|
+
|
|
91
|
+
let test1 = $(svg_doc).find('#test');
|
|
92
|
+
|
|
93
|
+
$(test1).draggable();
|
|
94
|
+
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
問題点
|
|
108
|
+
|
|
109
|
+
> document.getElementById('test_obj').contentDocument;
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
これがnullとなってしまいます。
|
|
114
|
+
|
|
115
|
+
document.getElementById('test_obj')自体でobject自体は取れているのですが
|
|
116
|
+
|
|
117
|
+
中身が取れていないので読み込みタイミングなどが原因なのかなとは思うのですが
|
|
118
|
+
|
|
119
|
+
どの様に対応すればいいのかがわかりません。
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
svg、javascriptへの知識が浅いため大変稚拙な説明となってしまっているかもしれませんが
|
|
124
|
+
|
|
125
|
+
ご有識者の方、お知恵を貸していただけたらと思います。
|
|
126
|
+
|
|
127
|
+
よろしくお願い致します。
|