The draggable image need to be re-sizable

The right side image (droppable Image) need to be resizable.
I applied the coding, Its not working.
Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />

    <title>Multi Image Draggable</title>
    <meta name="description" content="Multi Image Draggable" />

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript">
	    google.load("jquery", "1.4.2");
		google.load("jqueryui", "1.7.2");
	</script>
	
	<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />

	<script type="text/javascript">
    $(document).ready(function(){
        //Counter
        counter = 0;
        //Make element draggable
        $(".drag").draggable({
            helper:'clone',
            containment: 'frame',

            //When first dragged
            stop:function(ev, ui) {
            	var pos=$(ui.helper).offset();
            	objName = "#clonediv"+counter
            	$(objName).css({"left":pos.left,"top":pos.top});
            	$(objName).removeClass("drag");


               	//When an existiung object is dragged
                $(objName).draggable({
                	containment: 'parent',
                    stop:function(ev, ui) {
                    	var pos=$(ui.helper).offset();
                    	console.log($(this).attr("id"));
						console.log(pos.left)
                        console.log(pos.top)
						
                    }
					
                });
				
            }
			
        });

        //Make element droppable
        $("#frame").droppable({
			drop: function(ev, ui) {
				if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
					counter++;
					var element=$(ui.draggable).clone();
					element.addClass("tempclass");
					$(this).append(element);
					$(".tempclass").attr("id","clonediv"+counter);
					$("#clonediv"+counter).removeClass("tempclass");

					//Get the dynamically item id
					draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
					itemDragged = "dragged" + RegExp.$1
					console.log(itemDragged)

					$("#clonediv"+counter).addClass(itemDragged);
					
				}
				
				var containment = $( "#frame" ).resizable( "option", "containment" );
 
// Setter
$( "#frame" ).resizable( "option", "containment", "parent" );
        	}
			
			 });
			 
			});
			 

	</script>

</head>

<body>

<div id="wrapper">
	<div id="options">
		<div id="drag1" class="drag"></div> <!-- end of drag1 -->
		<div id="drag2" class="drag"></div> <!-- end of drag2 -->
		<div id="drag3" class="drag"></div> <!-- end of drag3 -->
		</div><!-- end of options -->
	<div id="frame">
		
	</div><!-- end of frame -->
</div><!-- end of wrapper -->
</body>
</html>

I do not see any sign of an image,
right, left or center, in your code. :wonky:

coothead

body {
	  text-align: center;
}
#wrapper {
	  text-align: left;
	  width: 720px;
	  margin-left: auto;
	  margin-right: auto;
}

#options{
	width: 200px;
	height:550px;
	border:1px solid black;
	float:left;
}

#frame{
	width:513px;
	height:550px;
	
	background-repeat: repeat-y;
    	background-position: 0 0;
    	border:1px solid black;
    	float:right;
}




#drag1 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("../images/thumimg1.jpg");
	width:100px;
	height:100px;
	    margin-left: 49px;
}

#drag2 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("../images/thumimg2.jpg");
	width:100px;
	height:100px;   
	margin-left: 49px;
}

#drag3 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("../images/thumimg3.jpg");
	width:100px;
	height:100px;
	    margin-left: 49px;
}


.ui-draggable-helperMoving {
	border: 1px dotted #000;
	padding: 6px;
	background: #fff;
	font-size: 1.2em;
	width:100px;
	height:100px;
}

.ui-draggable-helperStoped {
	border: 1px solid #000;
	width:5px;
	height:5px;
}



/* classes for dragged stuff */
.dragged1 {
	position:absolute; 
	background-image: url("../images/2.jpg");
	width:300px;
	height:300px;
}

.dragged2 {
	position:absolute; 
	background-image: url("../images/3.jpg");
	width:300px;
	height:300px;
}

.dragged3 {
	position:absolute; 
	background-image: url("../images/6.jpg");
	width:300px;
	height:300px;
}




#element{
	border:1px solid red
}

You can use any duplicate link for image from outside

The output will be like this, after drag and drop.

The right side image need to be re-sizable (stretchable)

It might be more help if you were to set up a jsfiddle or codepen showing what you are trying to achieve. Trying to follow your code and explanations over 5 posts is getting difficult - and we still see no images in your code.

    background-size: 100% 100%;

coothead

My Concept is

  1. Drag and drop the image, While dropping into right side, the image need to be large image.
  2. Once we dropped in right side, it will be movable within the right side box.
  3. It need to be stretchable.

The 3rd point process is not working for me.

I didn’t understand Mr.Coothead

What, precisely, do you not understand?

coothead

Why you gave this code " background-size: 100% 100%;"

I gave that code because you gave this code…

        background-image: url("../images/thumimg1.jpg");

coothead

I may be wrong but I don’t think it is possible to drag and drop a background image. It needs to be a “real” image.

I used the code, but i didn’t get an changes from that.

I need the right side image need to be stretchable

But its running in my system.

Do you have an other way to get the process

None of the processes are working for me. :wonky:

This, of course, means that we are unable to
examine your original problem…

“The draggable image need to be re-sizable”

coothead

Yup! Its not working in JS Fiddle, But its working in my System. I don’t know why?

Put it online then. :rolleyes:

coothead

I don’t have any domain, If possible you just try it in your system
Shall I send you the ZIP file?