отображать изображение над другим изображением

Question

отображать изображение над другим изображением

0

У меня есть фоновое изображение, и я хочу выполнять функциональные возможности, которые при нажатии кнопки добавляют второе изображение над фоновым изображением. Изображение добавляется щелчком в моем коде, но не над фоновым изображением. Кроме того, мое изображение имеет возможность перетаскивания, и я хочу, чтобы это перетащить только внутри div если я упоминаю width и height

Для лучшего объяснения заяц приходит код:

jsfiddle.net

$(document).ready(function(){
    $("button").click(function(){
       $("#currentimage").after('<img id="dragable" src="http://s25.postimg.org/pi8ruls3z/image.jpg" width="200px" height="auto" />');
        $("#dragable").draggable()

    });    
});

Anni 21 март 2014, в 08:49

Источник

0

Пользователь до, а не после STMT
Just code 21 март 2014, в 06:57
1

jsfiddle.net/arunpjohny/7p4F9/14
Arun P Johny 21 март 2014, в 07:06
0

спасибо Арун, это именно то, что я хочу, пожалуйста, скажите мне, что происходит, когда я нажимаю добавить изображение во второй раз. Второй экземпляр больше не перетаскивается
Anni 21 март 2014, в 09:33

Показать ещё 1 комментарий

Теги:

jquery

css

css3

jquery-ui

3 ответа

Ещё вопросы

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

sreenath · Answer 1 · 2014-03-21T05-15-00.000Z

попробуй это:

HTML:

<div id="draggable" style="display:none;">  
  <img src="http://s25.postimg.org/pi8ruls3z/image.jpg" width="200px" height="auto" /> 
</div>

Jquery:

$(document).ready(function(){
   $("button").click(function(){
    var position =  $("#currentimage").offset();
     height = $("#currentimage" ).height();  
    //width = $("#currentimage" ).width();
     $("#dragable").css({ "display" : "block" , 'height':height, position : "absolute", "z-index" :"101", "background-color" : "#009ddf","opacity" : "0.9" } );  
    $("#dragable").offset($("#currentimage" ).offset());
    $("#dragable").draggable();
    });    
});

при щелчке по изображению он примет текущее смещение изображения и наложит следующее изображение.

skrtbhtngr · Answer 2 · 2014-03-21T05-07-00.000Z

Попробуй это:

$(document).ready(function(){
    $("button").click(function(){
       $("#currentimage").html('<img id="dragable" src="http://s25.postimg.org/pi8ruls3z/image.jpg" width="200px" height="auto" />'+"<br /><img src=\"http://s25.postimg.org/v554s2umn/man_looking_at_sunset.jpg\" width=\"200px\" style=\"height: auto; z-index: 0;\"/>");
        $("#dragable").draggable()

    });    
});

user2579857 · Answer 3 · 2014-03-21T04-18-00.000Z

$(document).ready(function(){
    $("button").click(function(){
       $("#currentimage").appendTo('<img id="dragable" src="http://s25.postimg.org/pi8ruls3z/image.jpg" width="200px" height="auto" />');
        $("#dragable").draggable()
    });    
});

Вы можете использовать .appendTo();