Question

有人可以告诉我如何使可拖动图像显得水平而不会丢失功能。如果我将样式设置为水平，则图像不再可拖动。我正在使用jQuery＆amp; jQueryUI实现表单。

JQuery

<script type='text/javascript'>
$(window).load(function(){

$(function() {


$( "#sortable" ).sortable({
  placeholder: "ui-state-highlight",
  cursor: 'crosshair',
  update: function(event, ui) {
    var order = $("#sortable").sortable("toArray");
    order = JSON.stringify(order);
    correct = JSON.stringify(["4","3","2","1"]);
    if (!order==correct){
      var valid = false
        console.log(':(');
    }
    else {
       var valid = true;
    }
  }
});

$( "#sortable" ).disableSelection();


$('#submit').on('click', function() {
var valid = true,
    message = '';

$('form input').each(function() {
    var $this = $(this);

    if(!$this.val()) {
        var inputName = $this.attr('name');
        valid = false;
        message += 'Please enter your ' + inputName + '\n';
    }
});

if(!valid) {
    alert(message);
}
else {
  window.location.href = "http://stackoverflow.com";
}
});
});
});
</script>

Html表格

<body>
<form action="" method="post" class="a">

Name : <input type="text" class="text" name="name" id="name" /> <br/>
Address : <input type="text" class="text" name="address" id="address" /> <br/>
email : <input type="text" class="text" name="email" id="email" /> <br/>

<input type="hidden" id="image_order" name="image_order" value="order" />
<ul id="sortable" style="width: 524px;">

<li id="1" class="ui-state-default"><img src="1.png" width="100" height="90" /></li>
<li id="2" class="ui-state-default"><img src="2.png" width="100" height="90" /></li>
<li id="3" class="ui-state-default"><img src="3.png" width="100" height="90" /></li>
<li id="4" class="ui-state-default"><img src="4.png" width="100" height="90" /></li>  

</ul>
<div style="clear:both;"></div>
<input name="Submit" value="RE-ORDER" type="submit" />
<input type="button" id="submit" value="Submit" name="submit" />
</form>

</body>

Answer 1

您只需要将样式display: inline-block添加到li元素，就像这样

li {
    display: inline-block;
    margin: 10px;    // This just to give some space between the image
}

当拖动一张图片时，另一张图片将占据剩余空间，如果您希望拖动的图片保留空间，则width与您的li一致image width （如果所有图像的宽度相同）。

li {
    display: inline-block;
    margin: 10px;    // This just to give some space between the image
    width: 100px;    // To reserve the space
}

这是工作Demo

编辑：

要在评论中回答有关您的问题的更多信息，导致您的验证有效的主要问题是因为您在{{1}内的自己的上下文中使用了相同的变量valid和个人}和sortable update，从而导致您的验证在您填写所有输入字段时说有效，要解决此问题，您需要在开始时声明自己的变量，并更改其值通过验证，更改的代码变为如下：

submit onclick

这是工作Demo

试图使可拖动的表单元素横向jQuery

1 个答案:

编辑：