003drag.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>mail3</title>
<!-- META Tag Start -->
<meta charset="UTF-8">
<meta id="extViewportMeta" name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<!-- META Tag End -->
<!-- CSS Tag Start -->
<link rel="stylesheet" type="text/css" href="../css/base.css" />
<link rel="stylesheet" type="text/css" href="../css/layout.css" />
<!-- CSS Tag End -->
</head>
<body class="bg_lgray">
<article id="scroll_box"
style="width: 100%; height: 100vh; /* border: 1px solid black; */ /* overflow: hidden scroll */ ">
<ul class="lst_ul">
<li class="cMsg" data-msgid="103ABE17D3ACD6E94925844F0078DE53"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">오전 7:00</span><i class="ico_favo "><span
class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="793FC30FEB32A0644925844E0078DE73"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.07 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="4D7DD3E3ED8D11564925844D0078DE6B"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.06 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="16F8C4DD033CD0B44925844C0078DE60"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#"
class="off">
<div class="lst_line">
<span class="lst_reddot" style="display: none"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.05 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="411EB558E16935424925844B0078DE8C"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.04 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="EFD6F0EE6CAB80C44925844A0078DE75"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.03 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="88AD025FDD66748D492584490078DE93"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#"
class="off">
<div class="lst_line">
<span class="lst_reddot" style="display: none"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.02 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="58328CFB88496CEC492584480078DE38"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#"
class="off">
<div class="lst_line">
<span class="lst_reddot" style="display: none"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.08.01 07:00:12</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="797022BD6304931C492584470078DE77"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#"
class="off">
<div class="lst_line">
<span class="lst_reddot" style="display: none"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.31 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="041595B9D9C13C61492584460078DE7E"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.30 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="A7D87F923D0993B3492584450078DE60"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.29 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="C963F61C52032CEF492584440078DE72"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.28 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="9CD36240B477427B492584430078DE5A"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.27 07:00:12</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="25D35D4B6E6FB871492584420078DE78"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.26 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="14C92A96F65848F7492584410078DE7D"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.25 07:00:13</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="0D9323BFA59AAAC2492584400078DE65"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#"
class="off">
<div class="lst_line">
<span class="lst_reddot" style="display: none"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.24 07:00:12</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="09F40FA67169C16A4925843F0078E78A"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.23 07:00:37</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="2FE462D0A6951C624925843E0078E92E"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#"
class="off">
<div class="lst_line">
<span class="lst_reddot" style="display: none"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.22 07:00:41</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="AEC71E2F37E9A7B24925843D0078E916"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.21 07:00:41</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
<li class="cMsg" data-msgid="894B86DE8C2692E94925843C0078E933"
data-mailboxid="InBox" data-dockind="mail" data-signtype=""
data-signid="" data-docpath="" data-year=""><a href="#">
<div class="lst_line">
<span class="lst_reddot" style="display:"> <span
class="hidden_txt">새로운소식</span>
</span>
<div class="lst_from">보낸이</div>
<div class="lst_rbox">
<span class="lst_date">2019.07.20 07:00:41</span><i
class="ico_favo "><span class="hidden_txt">장기보관</span></i>
</div>
</div>
<div class="lst_line">
<span class="lst_to">TO</span>
<div class="lst_topic">제목</div>
</div>
<div class="lst_line mt03">
<span class="lst_txt">내용</span>
</div>
</a></li>
</ul>
</article>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="003mouse_drag_event.js"></script>
</html>
003mouse_drag_event.js
var flag_pc = false;
$(document).ready(function() {
var filter = "win16|win32|win64|mac|macintel";
if (navigator.platform) {
if (filter.indexOf(navigator.platform.toLowerCase()) < 0) {
// mobile
} else {
// pc
flag_pc = true;
}
}
});
// 마우스/터치 스크롤 기능
var dragFlag = false;
var x, y, pre_x, pre_y;
$(function() {
//PC
if (flag_pc) {
var temp = 0;
$(this).mousedown(function(e) {
dragFlag = true;
var obj = $(this);
console.log("obj:" + obj);
x = obj.scrollLeft();
y = obj.scrollTop();
pre_x = e.screenX;
pre_y = e.screenY;
$(this).css("cursor", "pointer");
});
$(this).mousemove(function(e) {
$(this).scrollTop(temp)
if (dragFlag) {
var obj = $(this);
obj.scrollLeft(x - e.screenX + pre_x);
obj.scrollTop(y - e.screenY + pre_y);
return false;
}
});
$(this).mouseup(function(e) {
$(document).ready(function() {
var filter = "win16|win32|win64|mac|macintel";
if (navigator.platform) {
// mobile
if (filter.indexOf(navigator.platform.toLowerCase()) < 0) {
} else { // PC
scrollEventPc();
}
}
});
dragFlag = false;
$(this).css("cursor", "default");
temp = $(this).scrollTop()
});
let scrollEventPc = function() {
let $window = $(this);
let scrollTop = $window.scrollTop();
let windowHeight = $window.height();
let documentHeight = $(document).height();
// console.log("documentHeight:" + documentHeight + " | scrollTop:"
// + scrollTop + " | windowHeight: " + windowHeight);
if (scrollTop + windowHeight + 30 > documentHeight) {
appendHtml();
}
}
} else {
//mobile
$(window).scroll(
function() {
//console.log(Math.ceil($(window).scrollTop()) + " >= " + ($(document).height() - $(window).height()));
if (Math.ceil($(window).scrollTop() * 1.05) >= ($(document).height() - $(window).height())) {
//alert(Math.ceil($(window).scrollTop() * 1.05) + " >= " + ($(document).height() - $(window).height()));
appendHtml();
}
});
}
let appendHtml = function() {
var readFlag = "Y";
var fromName = "Test Name";
var getDate = "대충 20190729";
var longTermFlag = "Y";
var importantFlag = "Y";
var subject = "iscroll jQuery Test : Subject";
var attachFlag = "Y";
var longTermFlag = "Y";
var htmlMailRow = "";
for (i = 0; i < 10; i++) {
htmlMailRow += ("" + "<li class='cMsg'>" + " <a href='#'"
+ (readFlag ? " class='off'" : "")
+ ">"
+ " <div class='lst_line'>"
+ " <span class='lst_reddot' style='display:"
+ (readFlag ? "none" : "")
+ "'>"
+ " <span class='hidden_txt'>새로운소식</span>"
+ " </span>"
+ " <div class='lst_from'>"
+ fromName
+ "</div>"
+ " <div class='lst_rbox'>"
+ " <span class='lst_date'>"
+ getDate
+ "</span>"
+ "<i class='ico_favo "
+ (longTermFlag ? "on" : "")
+ "'><span class='hidden_txt'>장기보관</span></i>"
+ " </div>"
+ " </div>"
+ " <div class='lst_line'>"
+ (importantFlag ? "<span class='lst_at'><span class='hidden_txt'>주의</span></span>"
: "")
+ " <span class='lst_to'>TO</span>"
+ " <div class='lst_topic'>"
+ subject
+ "</div>"
+ (attachFlag ? "<span class='lst_rbox'><i class='ico_clip'></i></span>"
: "") + " </div>"
+ " <div class='lst_line mt03'>"
+ " <span class='lst_txt'>"
+ "현재 파라미터(mailJson)에 메일내용이 안넘어옴.." + "</span>"
+ " </div>" + " </a>" + "</li>");
}
$('ul[class="lst_ul"]').append(htmlMailRow);
}
});
파일첨부
https://drsggg.tistory.com/265
