javascript - 如何进行 img 验证

标签 javascript jquery html css validation

我如何进行图像验证。这个页面的目标是制作一个简单的游戏。这个游戏需要某种形式的验证，但我似乎无法进行验证。我对制作的限制是我只能使用 CSS 和 Javascript。

例如，现在我的代码正在运行，所有图像都可以进入任何相册。是否可以在只有特定图像可以进入特定相册的情况下进行验证。例如，我只希望我的前 4 张图像能够进入第一张专辑(北)。如果其他图片试图被拖入该相册，它会拒绝并返回到原来的位置。

// add event handler
var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();

// inner variables
var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');

// preventDefault (stops the browser from redirecting off to the text)
function cancel(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }
  return false;
}

// update event handlers
function updateDataTransfer() {
    dragItems = document.querySelectorAll('[draggable=true]');
    for (var i = 0; i < dragItems.length; i++) {
        addEvent(dragItems[i], 'dragstart', function (event) {
            event.dataTransfer.setData('obj_id', this.id);
            return false;
        });
    }
}

// dragover event handler
addEvent(dropAreas, 'dragover', function (event) {
    if (event.preventDefault) event.preventDefault();

    // little customization
    this.style.borderColor = "#000";
    return false;
});

// dragleave event handler
addEvent(dropAreas, 'dragleave', function (event) {
    if (event.preventDefault) event.preventDefault();

    // little customization
    this.style.borderColor = "#ccc";
    return false;
});

// dragenter event handler
addEvent(dropAreas, 'dragenter', cancel);

// drop event handler
addEvent(dropAreas, 'drop', function (event) {
    if (event.preventDefault) event.preventDefault();

    // get dropped object
    var iObj = event.dataTransfer.getData('obj_id');
    var oldObj = document.getElementById(iObj);

    // get its image src
    var oldSrc = oldObj.childNodes[0].src;
    oldObj.className += 'hidden';

    var oldThis = this;

    setTimeout(function() {
        oldObj.parentNode.removeChild(oldObj); // remove object from DOM

        // add similar object in another place
        oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /></a>';

        // and update event handlers
        updateDataTransfer();

        // little customization
        oldThis.style.borderColor = "#ccc";
    }, 500);

    return false;
});
/* Page layout styles */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    color:#fff;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size: 19px;
    font-weight: normal;
    left: 50%;
    margin-left: -400px;
    padding: 25px 0;
    position: absolute;
    width: 540px;
}
 margin-left:5px;
}

/* Photo Gallery styles */
.gallery {
    margin: 50px auto 0;
    width: 840px;
}
.gallery a {
    display: inline-block;
    height: 135px;
    margin: 10px;
    opacity: 1;
    position: relative;
    width: 180px;

    -khtml-user-drag: element;

    /* CSS3 Prevent selections */
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;

    /* CSS3 transition rules */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.gallery a img {
    border: 8px solid #fff;
    border-bottom: 20px solid #fff;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    /* CSS3 transition rules */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

    /* CSS3 Box Shadow */
    -moz-box-shadow: 2px 2px 4px #444;
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
}

/* Custom CSS3 rotate transformation */
.gallery a:nth-child(1) img {
    -moz-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg);
}
.gallery a:nth-child(2) img {
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.gallery a:nth-child(3) img {
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
.gallery a:nth-child(4) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(5) img {
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.gallery a:nth-child(6) img {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.gallery a:nth-child(7) img {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
.gallery a:nth-child(8) img {
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
.gallery a:nth-child(9) img {
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
.gallery a:nth-child(10) img {
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
.gallery a:nth-child(11) img {
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}
.gallery a:nth-child(12) img {
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.gallery a:hover img {
    z-index: 5;

    /* CSS3 transition rules */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

    /* CSS3 transform rules */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.gallery a.hidden {
    height: 0;
    margin: 0;
    opacity: 0;
    width: 0;
}
.albums {
    margin: 40px auto 0;
    overflow: hidden;
    width: 840px;
}
.album {
    border: 3px dashed #ccc;
    float: left;
    margin: 10px;
    min-height: 100px;
    padding: 10px;
    width: 220px;

    /* CSS3 transition rules */
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
}
.album a {
    display: inline-block;
    height: 56px;
    margin: 15px;
    opacity: 1;
    position: relative;
    width: 75px;

    -khtml-user-drag: element;
    -webkit-user-drag: element;
    -khtml-user-select: none;
    -webkit-user-select: none;

    /* CSS3 Prevent selections */
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;

    /* CSS3 transition rules */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.album a img {
    border: 4px solid #fff;
    border-bottom: 10px solid #fff;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    /* CSS3 transition rules */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

    /* CSS3 Box Shadow */
    -moz-box-shadow: 2px 2px 4px #444;
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
}
 <div class="albums">
            <div class="album" id="drop_1" droppable="true"><h2>North</h2></div>
            <div class="album" id="drop_2" droppable="true"><h2>Centre</h2></div>
            <div class="album" id="drop_3" droppable="true"><h2>South<h2></div>
        </div>
        <div style="clear:both"></div>
        <div class="gallery">
            <a id="1" draggable="true"><img src="images/1.jpg"></a>
            <a id="2" draggable="true"><img src="images/2.jpg"></a>
            <a id="3" draggable="true"><img src="images/3.jpg"></a>
            <a id="4" draggable="true"><img src="images/4.jpg"></a>
            <a id="5" draggable="true"><img src="images/5.jpg"></a>
            <a id="6" draggable="true"><img src="images/6.jpg"></a>
            <a id="7" draggable="true"><img src="images/7.jpg"></a>
            <a id="8" draggable="true"><img src="images/8.jpg"></a>
            <a id="9" draggable="true"><img src="images/9.jpg"></a>
            <a id="10" draggable="true"><img src="images/10.jpg"></a>
            <a id="11" draggable="true"><img src="images/11.jpg"></a>
            <a id="12" draggable="true"><img src="images/12.jpg"></a>
        </div>

最佳答案

您可以访问被拖动的对象 ID 和目标 ID。您可以将其用于验证。这是一个示例，它允许前 4 张图片出现在第一个相册中，下一张出现在第二个相册中，依此类推。

// drop event handler
addEvent(dropAreas, 'drop', function (event) {
    if (event.preventDefault) event.preventDefault();

    // get dropped object
    var iObj = event.dataTransfer.getData('obj_id');
    var oldObj = document.getElementById(iObj);

    // validate
    var target = "drop_" + Math.ceil(iObj/4); // first  images
    if(this.id !== target) {
        return false;
    }

    ...
});

当然，您可以用任何您想要的方式验证这一点。你也可以这样做:

<a id="1" draggable="true" data-drop-to="drop_1"><img src="images/1.jpg"></a>

然后像这样验证它:

    var oldObj = document.getElementById(iObj);

    // validate
    if(this.id !== oldObj.dataset.dropTo) {
        return false;
    }

关于javascript - 如何进行 img 验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31085182/

上一篇：css - 无法在 ie 8 上点击网页中的链接

下一篇：javascript - 如何在加载之前用 Javascript 替换网页的背景图片？

相关文章：

javascript - typescript 导入模块作为变量不起作用

jquery - ASP 经典内联代码 + jQuery : How to do ajax call

javascript - Angular2 创建组件

javascript - 如何阻止提交但仍验证必填字段？

javascript - 基于简单存储的路由器中不必要的重新渲染

javascript - 鼠标指针不会隐藏在 chrome 全屏 div 上

javascript - 使用 Javascript 和 CSS 使波纹按钮可点击

javascript - 最后一招 - jQuery Mashable Mega Menu

javascript - Vanilla js平滑滚动中的计时功能

javascript - Jquery点击事件if语句

©2024 IT工具网  联系我们