Question

我正在尝试开发自定义工作表，用户可以在特定div中浏览和上传更多图像。那些图像应该只在div内部拖拽（我做了）。打印图像前有两个选项，第一个是无序对齐打印，第二个是对齐打印。因此，当用户点击对齐按钮时，所有上传的图像应该在该div中逐个对齐地进行水平对齐。

我试过的代码，

的CSS。

.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 0px 0px 0; font-size: .9em; }
.ui-widget-header p, .ui-widget-content p { margin:0px } 
#snaptarget { height: 842px; width:595px;  border:2px solid green; padding: 10px;}

的index.jsp

<Input type="button" value="align" onclick="alignment();"> 

<input type="file" id="files" name="files[]" accept="image/gif,image/jpeg"/>
<input type="button" id="p" value="print" onclick="printing();" align="right">
<p id="list"> </p> 

<div id="draggable" class="draggable ui-widget-content">  </div>

<input type="text" value="0" id="textid">

使用以下代码动态创建动态范围

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();

        var txtval=$('#textid').val();
        addplus1 = 1;
        txtval=parseInt(txtval)+parseInt(addplus1);
        //txtval+=addplus1;
        alert(txtval);
        $('#textid').val(txtval);
        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {
                // Render thumbnail.

                var span = document.createElement('span');
                span.innerHTML = ['<span id="s'+txtval+'" style=" width: 300px;"><ul id="un" class="img-list"><li onclick="getid(this)"><img id="img" class="thumb" src="', e.target.result,
                    '" title=" click this image for deselect" /><span class="text-content"><span>Click here to Drag</span></span></ul></span>'].join('');

                document.getElementById('list').insertBefore(span, null);
            };
        })(f); 

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

尝试了对齐代码，

function alignment() {
    var lengthoftxt=$('#textid').val();

    for(var i=1;i<=lengthoftxt;i++)
    {
        $('#s'+i).each(function() {
            // $(this).css({"marginLeft": "opx"}); 
            $(this).css({"align": "horizontly"}); 
            //how to align horizontly one by one within that div???
        });
    }    
}

$(document).ready(function() {
    $('#textid').val('0');
});

演示：http://jsfiddle.net/46psK/908/

我哪里错了？怎么做？

Answer 1

希望这是你想要的工作

p#list在#snaptarget之外，因此新创建的项目被放置在外面。将p标记放在#snaptarget

中

<div id="snaptarget" class="ui-widget-header">
     <p id="list"></p>
</div>

下面的js代码将float设置为带有id的跨度，但是所有这些跨度都有另一个span作为包装器，因此浮点数从未按预期工作。

$('#s' + i).each(function () {

     $(this).css({
          "float": "left"
      });
});

您可以在创建范围时添加一个类item。

 var span = document.createElement('span');
 span.className = "item";

在对齐函数中，为所有具有类float-left的跨度添加一个类item

 $('.item').addClass('float-left');

在CSS中

.float-left{ float: left}

Demo Fiddle

如何使用jquery水平对齐更多跨距

1 个答案: