JavaScript 아 날로 그 파일 드래그 상자 스타일 v 1.0 의 인 스 턴 스

7528 단어 js모방 하 다파일 드래그 상자양식
파일 드래그 v 1.0
그림 이 잘 모 르 면'새 링크 에서 그림 열기'를 우 클릭 하 십시오.
실현 효과

페이지 레이아웃

사고의 방향 을 실현 하 다.
드래그 상자
css 스타일 에 드래그 상자 스타일 을 설정 합 니 다.position:absolute 설정 에 주의 하 십시오.부유 상태.
p\#container 의 마 우 스 를 감청 하고 시작 좌 표를 가 져 옵 니 다.마 우 스 를 눌 렀 을 때 append()방법 으로 p\#selectBox 를 추가 합 니 다.
마우스 로 이 벤트 를 누 른 후 마우스 로 이 벤트 를 이동 합 니 다.마우스 의 현재 위치 이벤트.pageX,이벤트.pageY 를 비교 하여 p\#selectBox 에 좌표 top/left 를 추가 합 니 다.
사이즈 width/height.
마우스 가 p\#container 또는 마우스 로 이 벤트 를 풀 면 remove()방법 으로 p\#selectBox 를 제거 합 니 다.
단선
li 클릭 이벤트 감청 하기;
li>하위 요소.lebal>하위 요 소 를 통 해 lebal 을 가리 키 며 toggleClass()방법 으로 배경 스타일 을 수정 합 니 다(표시/취소).
이 지향 li 요소 자 체 를 통 해 toggleClass()방법 으로 배경 색 을 수정 합 니 다.
재선거
마 우 스 를 누 르 고 이 벤트 를 누 르 면 기 존의 lebal 과 li 의 체크 스타일 을 취소 합 니 다.
li 를 듣 고 마우스 가 위로 이동 할 때 스타일 을 추가 합 니 다.
마우스 가 풀 렸 을 때 mouseover 이 벤트 를 제거 하여 더 이상 선택 하지 않 습 니 다.
남 겨 진 문제
드래그 속도 가 빠 를 때 일부 파일 이 선택 되 지 않 을 수 있 습 니 다.코드 실행 효율 이 낮은 문제 라 고 초보 적 으로 판단 합 니 다.

어떤 파일 을 시작 으로 선택 할 때 이 파일 을 선택 할 수 없습니다.
이 파일 에 잠시 머 물 렀 을 때 선택 할 수 있 습 니 다.초기 판단 시 코드 실행 효율 이 낮은 문제 입 니 다.

체크 단 추 를 누 르 려 면 체크 를 완료 할 수 있 지만,바 인 딩 된 click 이벤트 와 체크 된 mousedown 이벤트 가 충돌 합 니 다.
체크 단 추 를 누 르 면 체크 된 mousedown 이 실 행 됩 니 다.선택 스타일,코드 논리 문 제 를 제거 합 니 다.
해결 됨:복선 상자 의 mousedown 이벤트 가 거품 을 막 습 니 다$(".lebal").bind("mousedown",function(event){event.stopPropagation();})


360 클 라 우 드 디스크 체크 상 자 를 드래그 해서 선택 한 후 마 우 스 를 옮 기 면 이 파일 의 선택 이 취 소 됩 니 다.어디로 논 리 를 넣 어야 할 지 모 르 겠 습 니 다.

소스 코드
<>

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" >
</head>

<body>
  <div id="container">
    <ul>
      <li>
        <div class="lebal"><label></label></div>
        <div class="file_name"><p>    </p></div>
      </li>
      <li>
        <div class="lebal"><label></label></div>
        <div class="file_name"><p>    </p></div>
      </li>
      <li>
        <div class="lebal"><label></label></div>
        <div class="file_name"><p>    </p></div>
      </li>
      <li>
        <div class="lebal"><label></label></div>
        <div class="file_name"><p>    </p></div>
      </li>
      <li>
        <div class="lebal"><label></label></div>
        <div class="file_name"><p>    </p></div>
      </li>
      <li>
        <div class="lebal"><label></label></div>
        <div class="file_name"><p>    </p></div>
      </li>
      <li>
        <div class="lebal"><label></label></div>
        <div class="file_name"><p>    </p></div>
      </li>
      <li>
        <div class="lebal"><label></label></div>
        <div class="file_name"><p>    </p></div>
      </li>
      <li>
        <div class="lebal"><label></label></div>
        <div class="file_name"><p>    </p></div>
      </li>
    </ul>
  </div>
</body>

</html>
<>

* {margin: 0;padding: 0;}
body {height: 700px;border: 1px black solid;}
#selectBox {border: 1px solid #89d9ff;background-color: rgba(137, 217, 255, 0.5);position: absolute;display: block;}
#container {margin-top: 100px;margin-left: 200px;width: 1200px;height: 600px;border: 1px red solid;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
ul {margin: 20px;}
li {width: 100%;height: 40px;border-top: 1px #ddd solid;list-style: none;}
label {background: url('../images/lebal.png')no-repeat;background-position: 0 0;width: 15px;height: 15px;margin: 12.5px auto;display: block;}
.toggleLebalClass {background-position: 0 -52px;}
.toggleLiClass {background: #eeefff;}
.lebal {width: 40px;height: 40px;float: left;}
.file_name {width: 80%;height: 40px;float: left;}
p {line-height: 40px;}
<>

"use strict";
var x, y;
$(function() {
  //   
  $("li").bind('click', function(event) {
    $(this).children(".lebal").children().toggleClass("toggleLebalClass");
    $(this).toggleClass("toggleLiClass");
  });
  //   
  $(".lebal").bind('mousedown', function(event) {
    event.stopPropagation();
  })
  //   
  $("#container").mousedown(function(event) {
    x = event.pageX;
    y = event.pageY;
    $("#container").append("<div id='selectBox'></div>");
    $("li").children(".lebal").children().removeClass("toggleLebalClass");
    $("li").removeClass("toggleLiClass");
    $("li").bind("mouseover", function() {
      $(this).children(".lebal").children().addClass("toggleLebalClass");
      $(this).addClass("toggleLiClass");
    });
  }).mousemove(function(event) {
    $("#selectBox").css({
      left: event.pageX > x ? x : event.pageX,
      top: event.pageY > y ? y : event.pageY,
      width: Math.abs(event.pageX - x),
      height: Math.abs(event.pageY - y)
    });
  }).mouseup(function(event) {
    $("#selectBox").remove();
    $("li").unbind("mouseover");
  })
  $("#container").mouseleave(function() {
    $("#selectBox").remove();
  })
});
이상 의 자바 스 크 립 트 아 날로 그 파일 드래그 상자 스타일 v 1.0 의 인 스 턴 스 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
jQuery 는 모든 체크 상자 에서 선 택 된 값 을 선택 하고 Ajax 비동기 로 데 이 터 를 제출 하 는 인 스 턴 스 를 선택 합 니 다.
vue 의 양 방향 연결 로 todo-list 의 예제 코드 를 간단하게 실현 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage