0

Trying to enhance usability of a jQuery draggable I run into following issue. I have a div container, containing an (small) image and a text, giving the user the oportunity to drag the image into an text editor.

If I add the .draggable to the img everything works fine, but since the image is quite small usability is not good.

So, what I want to do is making the div container draggable, but only drag the img. Do anyone knows a solution?

EDIT: here is the code

HTML += '<div id="row'+file.id+'" class="box downloadfilerow" style="opacity: 1;height:'+(that.options.previewMaxHeight)+'px;overflow-y:auto;padding:8px 0px 8px 2px;border-bottom:1px solid #DDD;">';
if (file.preview_url) {
   if (<?=json_encode($uploadAllowed)?>) {
        HTML +='<div class="delete">';
        HTML +='<button class="btn" style="float:right;margin:'+(that.options.previewMaxHeight/8)+'px;" id="del'+file.id+'" title="<?=Yii::t('widgets/FileSelector', 'Delete')?>" rel="tooltip">';
        HTML +='<i class="icon-trash"></i>';
        HTML +='</button>';
        //HTML +='<input type="checkbox" name="delete" value="1" style="float:left;margin:0px 10px;height:'+that.options.previewMaxHeight+'px;">';
        HTML +='</div>';
    }
    HTML +='<div style="float:left;height:'+that.options.previewMaxHeight+'px"><img data-view-url="'+file.view_url+'" style="float:left;cursor:move;max-width:'+that.options.previewMaxWidth+'px;max-height:'+that.options.previewMaxHeight+'px;" data-file="'+file.id+'" data-filename="'+file.name+'" id="'+file.id+'" src="'+ file.preview_url +'"></div>';
    HTML += namedLink;
    HTML += fileSize;

and

$("#row"+file.id).draggable({ helper: 'clone', zIndex: 2700, appendTo: 'body'});
3
  • So you want to drag the entire container and on drop drop only the contained image? Like this: jsfiddle.net/IrvinDominin/fGtzA Sep 12, 2013 at 11:35
  • can you show us the code you're working with?
    – apaul
    Sep 12, 2013 at 12:30
  • @IrvinDomininakaEdward i only want to drag the image. but if the user for example clicks 30px beside the image the function should "tolerate" this and let him drag the image
    – Christoph
    Sep 12, 2013 at 14:38

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.