试图使可拖动的表单元素水平jQuery

Trying to make draggable form elements horizontal jQuery

本文关键字：表单 元素 水平 jQuery 拖动      更新时间：2023-09-26

有人能告诉我如何在不失去功能的情况下使可拖动图像看起来水平吗。如果我将样式设置为水平，则图像将不再可拖动。我正在使用jQuery&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>

您只需要像这个一样将样式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
}

这是正在运行的演示

编辑：

为了在评论中回答更多关于你的问题，导致你的验证有效的主要问题是因为你在sortable update和submit onclick中使用了相同的变量valid和individual，因此如果你已经填写了所有的输入字段，就会导致你的有效性验证，要解决这个问题，你需要在开始时声明他们自己的变量，并通过验证更改其值，更改后的代码变成这样：

$(function () {
    var validInput, validSort;    // Added this line
    $("#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) {
                validSort = true    // Changed this line
                console.log(':)');
            }
            else {
                validSort = false;    // Added this line
            }
        }
    });
    $("#sortable").disableSelection();

    $('#submit').on('click', function () {
        validInput = true,    // Changed this line
            message = '';
        $('form input').each(function () {
            var $this = $(this);
            if (!$this.val()) {
                var inputName = $this.attr('name');
                validInput = false;     // Changed this line
                message += 'Please enter your ' + inputName + ''n';
            }
        });
        if (!validInput) {
            alert(message);
            console.log("not valid");
        } else if(!validSort) {    // Added this line
            alert("Sort Not Valid");
            //window.location.href = "http://stackoverflow.com";
            console.log("not valid");
        }
        else {       
            alert("Valid Submit");
            console.log("valid");
        }
        return false;
    });
});

这是正在运行的演示

相关文章：