Как сделать так, чтобы одну картинку можно было перемещать?

Question

[hollanditkzn]

Вопрос такой есть 2 изображение, мне нужно сделать так, чтобы задняя изображение стояла на месте и не производились ни каких изменений, а вторая двигалась при загрузке. Не могу понять как это сделать?

<div id="blockColor">
				<img id="urlAdress" class="ui-widjet-content" src="">			
				<img id="imgageKonstr" src="http://futbolka/image/mujskaya_futbolka_constr.png">
			</div>
<script>$("#fileForm").on("change",function(e){
						e.preventDefault();
						var fromData = new FormData($(this)[0])

						$.ajax({
							url: "unloade.php",
							type: "POST",
							data: fromData,
							dataType: "json",
							processData: false,
							contentType: false,
							success: function (data){
								$("#urlAdress").attr("src", data.url);
								alert("Отправлено"+data.url);
							}	
						});
					});</script>

Если брать то мне нужно вот это изображение перемещать urlAdress при загрузки, как это примерно сделать?

Comments

[Stalker_RED]

Перемещалась, в смысле чтоб ее мышкой можно было таскать?

[hollanditkzn]

Stalker_RED: да, совершенно верно

[hollanditkzn]

Stalker_RED: Вроде бы плагин немного я понял, но вот не удается именно это изображение перемезать, так как 1 это мешает вот это изображение imgageKonstr, а мне нужно, чтобы она была не изменной и никаких редактирование по ней не производились, а вот по urlAdress можно было делать все что угодно

[hollanditkzn]

Ну и конечно на примерах указывается, когда известно местоположение изображение и как она называется

Answer 1

[Stalker_RED]

Пример draggable без использования jQueryUI https://jsfiddle.net/Stalk/s3d5coky/

Comments

[hollanditkzn]

Это как понимаю нужно div добавлять отдельный верно?

[hollanditkzn]

Stalker_RED Ну немного не то, это я понял как перемещать, то есть она может перемещаться если указать z-index: 2 А мне нужно чтобы она оставалась позади, но где в imgageKonstr имеется прозрачность, то она показывалась. Я не пойму как это сделать, потому что у меня начинает брать картинку imgageKonstr, а мне нужно чтобы она вообще ее не брала

[hollanditkzn]

Вот конструкция примерно https://jsfiddle.net/hollanditkzn/qpkL5hzo/

[hollanditkzn]

Но он не будет работать, так как там не обрабатывается картинка которая загружается в php

[Stalker_RED]

hollanditkzn: добавляете к нужному элементу class="draggable" и всё, его можно перетаскивать.

[hollanditkzn]

добавил, мне мешает картинка imgageKonstr

[hollanditkzn]

Stalker_RED: Потому что z-index у нее больше чем у изображение urlAdress. а мне нужно чтобы картинка ишла под футболкой, где в изображение imgageKonstr прозрачно можно было это видеть. А так не получается

[hollanditkzn]

Наверное правильно указал, пример вот https://printbar.ru/svoy-dizayn/ или вот www.matrixl.ru/shop/gifts/bandany_i_platki

[hollanditkzn]

Там прекрасно показано, но так я не пойму по коду как они реализованы

[hollanditkzn]

Stalker_RED: Решение наверное если в imgageKonstr в стилях прописать pointer-event: none? тогда это изображение перестает быть активной. Это же решение? или есть другие способы?

[Stalker_RED]

hollanditkzn: Попробуйте, а если не прокатит, можно привязаться к mousedown и mousemove.

[hollanditkzn]

Stalker_RED: так-то она в хроме работает, просто на форуме на эту тему посмотрел, пишут что на opere и в старых IE не работает данный метод. Но пока что это решение. Если что перекину на mousedown и mousemove.